Tooltip

Developer
EOS
Size
2,050 Kb
Views
4,048
  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 EOS on 10 January 2023, Tuesday.

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> <a href="#" class="tooltip" data-tooltip= "Hello you, nice to meet you here!">Hover!</a>
<div class="positionmiddle">
<a href="#" class="tooltip2" data-tooltip2="Click me to try!">Here!</a>
</div>
<div class="positionbottom">
<a href="#" class="tooltip3" data-tooltip3="Yeah, I just learn so much!"><span class="tooltipword">Again!<span></a>
</div>
</body>
</html>

Tooltip - Script Codes CSS Codes

body { background: mistyrose;
}
.tooltip { font-family: Arial; font-size: 20px; text-decoration:none; color:cadetblue; position:relative;
}
.tooltip:hover:after { content: attr(data-tooltip); display:block; padding:.4em; color:peachpuff; background-color:tan; border-radius:.4em; position:absolute; top:1.7em; left:25%; white-space:nowrap;
}
.tooltip:hover:before { display:block; content:""; position:absolute; border-right: .5em solid transparent; border-bottom: .5em solid tan; border-left: .5em solid transparent; top:1.2em; left:50%;
}
.positionmiddle{ background:cornsilk; padding:5px; margin-top:30%;
text-align:center;
}
.tooltip2
{ font-family: serif; font-size: 20px; text-decoration:none; color:indianred; text-align:center;
}
.tooltip2:hover:after { content: attr(data-tooltip2); display:block; padding:.4em; color:peachpuff; background-color:tan; border-radius:.4em; position:absolute; top:37%; left:47%; right:auto; white-space:nowrap;
}
.tooltip2:hover:before { display:block; content:""; position:absolute; border-left: .7em solid transparent; border-right: .7em solid transparent; border-top: .7em solid tan; top:42%; left:50%;
}
.positionbottom { margin-top:30%; text-align:right;
}
.tooltip3 { clear:both; font-family:Palatino; font-size:30px; text-transform:uppercase; text-decoration:none; color:plum;
}
.tooltip3:hover:before { content: attr(data-tooltip3); display:block; position:absolute; white-space:nowrap; color:lavender; background-color:thistle; border-radius: .3em; padding:.3em; top:77%; right:2%; border: .2em solid pink;
}
.tooltip3:hover:after { display:block; content:""; position:absolute; width: .8em; height:.8em; background-color:thistle; -webkit-transform: rotate(45deg); right:2em; top:84%; border-bottom:.2em solid pink; border-right: .2em solid pink; z-index: 4;
}
.tooltipword {
font-family: Arial; color:orchid;
}
Tooltip - Script Codes
Tooltip - Script Codes
Home Page Home
Developer EOS
Username aurumlux
Uploaded January 10, 2023
Rating 3
Size 2,050 Kb
Views 4,048
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!

EOS (aurumlux) Script Codes
Name
ZIRKUS
Go top
Css Triangles
Background scroll
HEXAGON
FLOWER HOVER
A Pen by EOS
STELLA
Css hover
CROSS HOVER
Create amazing video scripts 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!