- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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>
- Related Articles
- 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
- Set left tooltip with CSS
- Set bottom tooltip with CSS
- Set right tooltip with CSS
- Fade In Tooltip with CSS Animation
- Change the style of top border with CSS
- Change the color of top border with CSS
- Set the top margin of an element with CSS
- Specify the top padding of an element with CSS
- Building Tooltip using CSS
- Set the navigation bar to stay at the top of the web page with CSS
Advertisements