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