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 |
SVG Animation diagramm | 2,317 Kb |
Responsive Login Page | 3,109 Kb |
3d looking button | 1,551 Kb |
Wireframing | 2,708 Kb |
Week_3_session | 3,267 Kb |
A Pen by Angelina | 2,262 Kb |
Menu_2 | 4,070 Kb |
Gradient Button | 1,580 Kb |
Transition Menu and Video Background | 4,971 Kb |
Tooltip | 2,244 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 |
Large canvas mousemove experiment | Jibbon | 2,885 Kb |
Filter inputs | Rowinf | 1,721 Kb |
A Pen by Xand0r | Xand0r | 1,928 Kb |
Draggables in pure angular | Rlo206 | 5,167 Kb |
IbrahimJabbari-Effect14 | Ibrahimjabbari | 1,919 Kb |
Twitch | SarahDunlap | 2,937 Kb |
Lightrays v2 | Sinthetyc | 2,903 Kb |
Pomodoro Timer | Sdas13 | 2,900 Kb |
Arrow Navigation | Hinducows | 1,973 Kb |
SVG Text Masking | JMChristensen | 2,141 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!