Menu
Tech Updates
Examples
HTML
HTML5
CSS
CSS3
JavaScript
jQuery
AngularJS
Articles
Articles
Tech Articles
Blog
Interview Questions
Computer Science
Civil Engineering
Mechanical Engineering
ECE
EEE
QUIZ (or) MCQ
S/W (or) Computer Science
Civil Engineering
Mechanical Engineering
ECE
EEE
Programs
C Language
C++ (or) CPP
Java
Python
PHP
Competitive Exams
Current Affairs
Current Affairs MCQ
Monthly Current Affairs MCQ
Today GK
General Knowledge
Verbal Ability
Mental Ability
UPSC
UPSC Previous Questions
UPSC 2022 Prelims Questions
UPSC 2021 Questions
UPSC 2020 Questions
UPSC 2019 Questions
S/W Tutorials
References
Practice Templates
PHP Projects
Bootstrap 3 Plugins
Bootstrap 4 Plugins
Articles
Articles
Tech Articles
Blog
Tech Updates
Marketing Management
School Mathematics
Quadratic Equations
Prime Numbers
Factorial Numbers
Fibonacci Numbers
Code Editor
IPC Sections
Home
Tutorials
CSS Example
<!DOCTYPE html> <html> <head> <title>CSS Tooltips</title> </head> <body> <style type="text/css"> .tooltip_top, .tooltip_bottom, .tooltip_left, .tooltip_right{ position:relative; display:inline-block; margin:25px 50px 20px; background-color:#0099da; color:#FFF; padding:7px 15px; border-radius:3px; } .tooltip_top .tooltiptext { visibility:hidden; width:120px; background-color:black; color:#fff; text-align:center; border-radius:2px; padding:5px 0; position:absolute; z-index:1; bottom:100%; left:50%; margin-left:-60px;} .tooltip_top:hover .tooltiptext {visibility:visible;} .tooltip_bottom .tooltiptext {visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 2px; padding: 5px 0; position:absolute; z-index:1; top:100%; left:50%; margin-left:-60px; } .tooltip_bottom:hover .tooltiptext { visibility: visible; } .tooltip_left .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 2px; padding: 5px 0; position: absolute; z-index: 1; top:0px; right: 105%;} .tooltip_left:hover .tooltiptext { visibility: visible; } .tooltip_right .tooltiptext {visibility: hidden; width: 120px; background-color: black; color:#fff; text-align:center; border-radius:2px; padding: 5px 0; position: absolute; z-index: 1; top: -5px; left: 105%;} .tooltip_right:hover .tooltiptext { visibility: visible; } </style> <div style="text-align:center;"> <div class="tooltip_top">TOP TOOLTIP <span class="tooltiptext">Top Tooltip</span> </div> <div class="tooltip_bottom">BOTTOM TOOLTIP <span class="tooltiptext">Bottom Tooltip</span> </div> <div class="tooltip_left">LEFT TOOLTIP <span class="tooltiptext">Left Tooltip</span> </div> <div class="tooltip_right">RIGHT TOOLTIP <span class="tooltiptext">Right Tooltip</span> </div> </div> </body> </html>
Output :
Topic :
Tooltips
