Tooltips

Developer
Alexandr
Size
3,353 Kb
Views
38,456
  1. Tooltips Previews
  2. Tooltips HTML Codes
  3. Tooltips CSS Codes

How do I make an tooltips?

What is a tooltips? How do you make a tooltips? This script and codes were developed by Alexandr on 30 July 2022, Saturday.

Tooltips Previews
IQ Test

Tooltips - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>tooltips</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<html> <head> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/> </head> <body> <div class="container"> <div class="tooltip"> <div class="header"> <div class="img"></div> <h1 class="username">Username</h1> <h2 class="edge">25 years</h2> <h2 class="location">London, UK</h2> </div> <div class="footer"><a class="but message" href="#">message</a><a class="but like-photo" href="#">like photo</a></div> <div class="corner"></div> </div> <div class="tooltip tooltip-right inverse"> <div class="header"> <div class="img"></div> <h1 class="username">Username</h1> <h2 class="edge">25 years</h2> <h2 class="location">London, UK</h2> </div> <div class="footer"><a class="but message" href="#">message</a><a class="but like-photo" href="#">like photo</a></div> <div class="corner"></div> </div> </div> </body>
</html>
</body>
</html>

Tooltips - Script Codes CSS Codes

* { padding: 0; margin: 0; outline: 0;
}
img { border: 0;
}
body { background-color: #e0e0e0;
}
.container { position: relative; margin: 50px auto; width: 710px;
}
.container .tooltip { box-sizing: border-box; box-shadow: 0 1px 5px 2px #c5c5c5; background-color: #fff; border: 1px solid transparent; border-radius: 5px; margin: 50px 30px; width: 292px; position: relative; display: inline-block;
}
.container .tooltip .header { box-sizing: border-box; height: 110px; padding: 23px;
}
.container .tooltip .img { background: #e0e0e0; float: left; margin-right: 23px; width: 64px; height: 64px;
}
.container .tooltip h1.username { font: 600 18px Roboto, sans-serif; color: #333; margin-top: -3px;
}
.container .tooltip h2.edge, .container .tooltip h2.location { font: 600 14px Roboto, sans-serif; color: #888; padding-top: 5px;
}
.container .tooltip h2.location { padding-top: 7px;
}
.container .tooltip .footer { border-radius: 5px; background: #f9f9f9; box-sizing: border-box; padding: 17px 0 0 23px; width: 100%; height: 72px;
}
.container .tooltip a.but { position: relative; border-radius: 5px; box-shadow: 0 1px 2px 0px #c5c5c5; display: inline-block; font: 14px Roboto, sans-serif; margin-right: 16px; padding: 11px 22px 12px 22px; text-decoration: none; text-transform: uppercase;
}
.container .tooltip a.but:hover { top: -1px; left: -1px;
}
.container .tooltip a.but:active { top: 1px; left: 1px;
}
.container .tooltip a.message { background: #00bcd4; color: #fff;
}
.container .tooltip a.like-photo { background: #e0e0e0; color: #333;
}
.container .tooltip .corner { background: #fff; box-shadow: -2px -2px 2px 0px #c5c5c5; border: 0px solid red; position: absolute; transform: rotate(45deg); top: -10px; left: 25px; width: 20px; height: 20px;
}
.container .tooltip-right .corner { top: 25px; left: calc(100% - 10px); transform: rotate(135deg);
}
.container .inverse { background: #444;
}
.container .inverse .img { background: #545454;
}
.container .inverse h1.username { color: #fff;
}
.container .inverse h2.edge, .container .inverse h2.location { color: #aaa;
}
.container .inverse .footer { background: #333;
}
.container .inverse a.but { box-shadow: 0 1px 2px 0px #2e2e2e;
}
.container .inverse a.like-photo { background: #444; color: #fff;
}
.container .inverse .corner { background: #444;
}
Tooltips - Script Codes
Tooltips - Script Codes
Home Page Home
Developer Alexandr
Username Aortan
Uploaded July 30, 2022
Rating 3
Size 3,353 Kb
Views 38,456
Do you need developer help for Tooltips?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alexandr (Aortan) Script Codes
Name
Shape-outside
A Pen by Alexander
Gamma
Dir_tree
My slider
Colorful flexblock
Overflow-wrap and white-space
Background change button
Game of Life
Flexblock
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!