- 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 right of the tooltip with CSS
Use the left CSS property to add an arrow to the right of the tooltip.
You can try to run the following code to add a tooltip with an arrow to the right:
Example
<!DOCTYPE html>
<html>
<style>
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: blue;
color: #fff;
z-index: 1;
top: -5px;
right: 110%;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
}
.mytooltip {
position: relative;
display: inline-block;
margin-left: 150px;
}
.mytooltip .mytext:after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 6px;
border-style: solid;
border-color: transparent transparent transparent blue;
}
.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 24-Jun-2020 07:12:08
- Related Questions & Answers
- Arrow to the bottom of the tooltip with CSS
- Arrow to the left of the tooltip with CSS
- Arrow to the top of the tooltip with CSS
- Add arrow in tooltip with CSS
- Set right tooltip with CSS
- Change the style of the right border with CSS
- Set left tooltip with CSS
- Set bottom tooltip with CSS
- Set top tooltip with CSS
- Change the color of right border with CSS
- Float List Items to the right with CSS
- Set the right margin of an element with CSS
- Specify the right padding of an element with CSS
- Fade In Tooltip with CSS Animation
- Building Tooltip using CSS
Advertisements