Tooltip

Developer
Angelina
Size
2,244 Kb
Views
18,216
  1. Tooltip Previews
  2. Tooltip HTML Codes
  3. Tooltip CSS Codes

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 Previews
IQ Test

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;
}
Tooltip - Script Codes
Tooltip - Script Codes
Home Page Home
Developer Angelina
Username Angelina_Lapteva
Uploaded November 24, 2022
Rating 3
Size 2,244 Kb
Views 18,216
Do you need developer help for Tooltip?

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!

Angelina (Angelina_Lapteva) Script Codes
Name
Transition Menu and Video Background
Week_3_session
SVG Animation diagramm
Animated
Menu_2
Progress bar multiple
Instructions page
Responsive Login Page
3d looking button
Week 2 Session
Create amazing art & images 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!