There are plenty of JavaScript-based libraries that show tooltips when you hover your mouse over a certain area of a web page. Some are rather plain, some allow the tooltip to display HTML content styled with CSS.
But is there a way to show a styled tooltip without using JavaScript? If you just use the title attribute, tags are not processed (e.g. foo<br />bar doesn't produce a line break). I'm looking for a solution that allows one to display styled HTML content without using any JavaScript.
Using the title attribute:
<a href="#" title="Tooltip here">Link</a>Pure CSS:
.app-tooltip {_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
.app-tooltip:before {_x000D_
content: attr(data-title);_x000D_
background-color: rgba(97, 97, 97, 0.9);_x000D_
color: #fff;_x000D_
font-size: 12px;_x000D_
padding: 10px;_x000D_
position: absolute;_x000D_
bottom: -50px;_x000D_
opacity: 0;_x000D_
transition: all 0.4s ease;_x000D_
font-weight: 500;_x000D_
z-index: 2;_x000D_
}_x000D_
_x000D_
.app-tooltip:after {_x000D_
content: '';_x000D_
position: absolute;_x000D_
opacity: 0;_x000D_
left: 5px;_x000D_
bottom: -16px;_x000D_
border-style: solid;_x000D_
border-width: 0 10px 10px 10px;_x000D_
border-color: transparent transparent rgba(97, 97, 97, 0.9) transparent;_x000D_
transition: all 0.4s ease;_x000D_
}_x000D_
_x000D_
.app-tooltip:hover:after,_x000D_
.app-tooltip:hover:before {_x000D_
opacity: 1;_x000D_
}<div href="#" class="app-tooltip" data-title="Your message here"> Test here</div>Another similar way to do it by css:
#img { }_x000D_
#img:hover {visibility:hidden}_x000D_
#thistext {font-size:22px;color:white }_x000D_
#thistext:hover {color:black;}_x000D_
#hoverme {width:50px;height:50px;}_x000D_
_x000D_
#hoverme:hover { _x000D_
background-color:green;_x000D_
position:absolute ;_x000D_
left:300px;_x000D_
top:100px;_x000D_
width:40%;_x000D_
height:20%;_x000D_
}<p id="hoverme"><img id="img" src="http://a.deviantart.net/avatars/l/o/lol-cat.jpg"></img><span id="thistext">LOCATZ!!!!</span></p>Try it: http://jsfiddle.net/FdBu7/
And here is some links about transitions and new ways to do it: http://www.w3schools.com/css3/css3_transitions.asp http://dev.opera.com/articles/view/css3-show-and-hide/
This one is very interesting,
HTML and CSS only
.help-tip {_x000D_
position: absolute;_x000D_
top: 18px;_x000D_
left: 18px;_x000D_
text-align: center;_x000D_
background-color: #BCDBEA;_x000D_
border-radius: 50%;_x000D_
width: 24px;_x000D_
height: 24px;_x000D_
font-size: 14px;_x000D_
line-height: 26px;_x000D_
cursor: default;_x000D_
}_x000D_
_x000D_
.help-tip:before {_x000D_
content: '?';_x000D_
font-weight: bold;_x000D_
color: #fff;_x000D_
}_x000D_
_x000D_
.help-tip:hover span {_x000D_
display: block;_x000D_
transform-origin: 100% 0%;_x000D_
-webkit-animation: fadeIn 0.3s ease-in-out;_x000D_
animation: fadeIn 0.3s ease-in-out;_x000D_
}_x000D_
_x000D_
.help-tip span {_x000D_
display: none;_x000D_
text-align: left;_x000D_
background-color: #1E2021;_x000D_
padding: 5px;_x000D_
width: 200px;_x000D_
position: absolute;_x000D_
border-radius: 3px;_x000D_
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);_x000D_
left: -4px;_x000D_
color: #FFF;_x000D_
font-size: 13px;_x000D_
line-height: 1.4;_x000D_
}_x000D_
_x000D_
.help-tip span:before {_x000D_
position: absolute;_x000D_
content: '';_x000D_
width: 0;_x000D_
height: 0;_x000D_
border: 6px solid transparent;_x000D_
border-bottom-color: #1E2021;_x000D_
left: 10px;_x000D_
top: -12px;_x000D_
}_x000D_
_x000D_
.help-tip span:after {_x000D_
width: 100%;_x000D_
height: 40px;_x000D_
content: '';_x000D_
position: absolute;_x000D_
top: -40px;_x000D_
left: 0;_x000D_
}<span class="help-tip">_x000D_
<span > This is the inline help tip! </span>_x000D_
</span>Similar to koningdavid's, but works on display:none and block, and adds additional styling.
div.tooltip {_x000D_
position: relative;_x000D_
/* DO NOT include below two lines, as they were added so that the text that_x000D_
is hovered over is offset from top of page*/_x000D_
top: 10em;_x000D_
left: 10em;_x000D_
/* if want hover over icon instead of text based, uncomment below */_x000D_
/* background-image: url("../images/info_tooltip.svg");_x000D_
/!* width and height of svg *!/_x000D_
width: 16px;_x000D_
height: 16px;*/_x000D_
}_x000D_
_x000D_
_x000D_
/* hide tooltip */_x000D_
_x000D_
div.tooltip span {_x000D_
display: none;_x000D_
}_x000D_
_x000D_
_x000D_
/* show and style tooltip */_x000D_
_x000D_
div.tooltip:hover span {_x000D_
/* show tooltip */_x000D_
display: block;_x000D_
/* position relative to container div.tooltip */_x000D_
position: absolute;_x000D_
bottom: 1em;_x000D_
/* prettify */_x000D_
padding: 0.5em;_x000D_
color: #000000;_x000D_
background: #ebf4fb;_x000D_
border: 0.1em solid #b7ddf2;_x000D_
/* round the corners */_x000D_
border-radius: 0.5em;_x000D_
/* prevent too wide tooltip */_x000D_
max-width: 10em;_x000D_
}<div class="tooltip">_x000D_
hover_over_me_x000D_
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis purus dui. Sed at orci. </span>_x000D_
</div>You can use the title attribute, e.g. if you want to have a Tooltip over a text, just make:
<span title="This is a Tooltip">This is a text</span>This is my solution for this:
https://gist.github.com/BryanMoslo/808f7acb1dafcd049a1aebbeef8c2755
The element recibes a "tooltip-title" attribute with the tooltip text and it is displayed with CSS on hover, I prefer this solution because I don't have to include the tooltip text as a HTML element!
#HTML
<button class="tooltip" tooltip-title="Save">Hover over me</button>
#CSS
body{
padding: 50px;
}
.tooltip {
position: relative;
}
.tooltip:before {
content: attr(tooltip-title);
min-width: 54px;
background-color: #999999;
color: #fff;
font-size: 12px;
border-radius: 4px;
padding: 9px 0;
position: absolute;
top: -42px;
left: 50%;
margin-left: -27px;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:after {
content: "";
position: absolute;
top: -9px;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #999999 transparent transparent;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover:before,
.tooltip:hover:after{
visibility: visible;
opacity: 1;
}
Source: Stackoverflow.com