- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Arrow to the top of the tooltip with CSS
Use the bottom CSS property to add arrow to the top of the tooltip.
Example
You can try to run the following code to add a tooltip with arrow to the top:
<!DOCTYPE html>
<html>
<style>
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: blue;
color: #fff;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
}
.mytooltip {
position: relative;
display: inline-block;
}
.mytooltip .mytext:after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
border-width: 3px;
border-style: solid;
border-color: transparent transparent blue transparent;
}
.mytooltip:hover .mytext {
visibility: visible;
}
</style>
<body>
<div class = "mytooltip">Keep mouse cursor over me
<span class = "mytext"> My Tooltip text</span>
</div>
</body>
</html>
Updated on 02-Jul-2020 14:02:26
- Related Questions & Answers
- Arrow to the bottom of the tooltip with CSS
- Arrow to the left of the tooltip with CSS
- Arrow to the right of the tooltip with CSS
- Add arrow in tooltip with CSS
- Set top tooltip with CSS
- Change the color of top border with CSS
- Change the style of top border with CSS
- Set left tooltip with CSS
- Set bottom tooltip with CSS
- Set right tooltip with CSS
- Set the top margin of an element with CSS
- Specify the top padding of an element with CSS
- Fade In Tooltip with CSS Animation
- Set the navigation bar to stay at the top of the web page with CSS
- Building Tooltip using CSS
Advertisements