Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Set left tooltip with CSS
To set left tooltip, use the right CSS property. A left tooltip appears to the left of the trigger element when hovering, creating an interactive user interface element.
Syntax
.tooltip .tooltip-text {
position: absolute;
right: 100%;
}
Key Properties
| Property | Purpose |
|---|---|
position: absolute |
Positions tooltip relative to parent |
right: 100% |
Places tooltip to the left of parent element |
visibility: hidden/visible |
Controls tooltip display on hover |
Example
The following example creates a left tooltip that appears when hovering over the text −
<!DOCTYPE html>
<html>
<head>
<style>
.mytooltip {
position: relative;
display: inline-block;
margin-left: 150px;
background-color: #f0f0f0;
padding: 10px;
border: 1px solid #ccc;
cursor: pointer;
}
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: orange;
color: white;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -6px;
right: 100%;
}
.mytooltip:hover .mytext {
visibility: visible;
}
</style>
</head>
<body>
<div class="mytooltip">Keep mouse cursor over me
<span class="mytext">My Tooltip text</span>
</div>
</body>
</html>
A gray box with the text "Keep mouse cursor over me" appears. When you hover over it, an orange tooltip with white text "My Tooltip text" appears to the left of the box.
Conclusion
Left tooltips are created using position: absolute and right: 100% properties. The visibility property controls when the tooltip appears on hover, creating an effective user interface element.
Updated on: 2026-03-15T12:30:42+05:30
136 Views
Advertisements