Tooltip
How do I make an tooltip?
What is a tooltip? How do you make a tooltip? This script and codes were developed by Angelina on 24 November 2022, Thursday.
Tooltip - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tooltip</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="column2"> <div class="nicknames"> <span class="CurrencyFactsTitle"> Nicknames:</span> </br> greenback, buck, green, dough, smacker, bones, dead presidents, scrillas, paper</div> <div class="banknotes"> <span class="CurrencyFactsTitle"> Banknotes:</span></br> De uso frecuente: $1, $5, $10, $20, $50, $100</br> De uso infrecuente: $2</div> <div class="coins"> <span class="CurrencyFactsTitle">Coins: </span> </br> Fréquemment utilisé(e)s: 1¢, 5¢, 10¢, 25¢</br> Rarement utilisé(e)s: $1, 50¢</div> <div class="users"> <span class="CurrencyFactsTitle">Users: </span> </br> United States, America, American Samoa... <a href="#" class="tooltip">more <span class="tooltiptext">The US Dollar is the currency of United States. Our currency rankings show that the most popular United States</span></a></div> <div class="Inflation"> <span class="CurrencyFactsTitle">Inflation: </span> </br> 1.60% </div> <div class="CentraBank"> <span class="CurrencyFactsTitle"> Central Bank: </span></br> Federal Reserve Bank Website: <a href="#">www.federalreserve.gov</a> </div> <div class="CurrencyFactsEmailUs">Have more info about the US Dollar? <a href="#"> Email Us </a></div>
</div>
</body>
</html>
Tooltip - Script Codes CSS Codes
.column2{ float:left; width:70%;
}
.nicknames { width:98%; border-left: solid #027acd 2px; padding:5px 10px 5px 10px; position:relative; margin:1%; float:left; min-width:180px; }
.banknotes {
width:48%;
border-left: solid #027acd 2px;
padding:5px 10px 5px 10px;
position:relative;
margin:1% 1% ;
float:left;
min-width:200px;
min-height:82px; }
.coins {
width:48%;
border-left: solid #027acd 2px;
padding:5px 10px 5px 10px;
position:relative;
margin:1%;
float:left;
min-width:200px;
min-height:82px; }
.users {
width:68%;
border-left: solid #027acd 2px;
padding:5px 10px 5px 10px;
position:relative;
margin:1%;
float:left;
min-width:200px; }
.Inflation {
width:28%;
border-left: solid #027acd 2px;
padding:5px 10px 5px 10px;
position:relative;
margin:1%;
float:left;
min-width:100px; } .CentraBank { width:98%; border-left: solid #027acd 2px; padding:5px 10px 5px 10px; position:relative; margin:1%; float:left; min-width:180px; }
.tooltip { position: relative; display: inline-block;
}
.tooltip .tooltiptext { visibility: hidden; width: 420px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -60px;
}
.tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext { visibility: visible;
}
Developer | Angelina |
Username | Angelina_Lapteva |
Uploaded | November 24, 2022 |
Rating | 3 |
Size | 2,244 Kb |
Views | 18,216 |
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!
Name | Size |
Gradient Button | 1,580 Kb |
Animated | 3,336 Kb |
Progress bar multiple | 2,179 Kb |
Instructions page | 2,260 Kb |
Tooltip | 2,244 Kb |
Beautiful PersonaL Page | 3,500 Kb |
A Pen by Angelina | 2,262 Kb |
Smooth scroll | 3,246 Kb |
Week_3_session | 3,267 Kb |
SVG Animation diagramm | 2,317 Kb |
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!
Name | Username | Size |
Expandable Left Side Bar with jQuery animate | Retrofuturistic | 2,483 Kb |
Sequence.js - Sliding Horizontal Parallax | Maheshc | 4,537 Kb |
JS Beispiel getElementsByClassName 3 | HSZG-Frontend-Kurs | 1,988 Kb |
A Pen by Bryan Rojas | Bryanrojas | 1,873 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
Pericles mi loro... | Judag | 4,125 Kb |
AngularJS Animated Todo List | Ehaase | 2,975 Kb |
Buttons for autumn | Nikazawila | 1,795 Kb |
We Simplify animation | Meodai | 48,169 Kb |
Button shaking | SusanneLundblad | 2,227 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!