Tooltip with HTML content without JavaScript
HtmlCssTooltipHtml Problem Overview
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.
Html Solutions
Solution 1 - Html
I have made a little example using css
.hover {
position: relative;
top: 50px;
left: 50px;
}
.tooltip {
/* hide and position tooltip */
top: -10px;
background-color: black;
color: white;
border-radius: 5px;
opacity: 0;
position: absolute;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.hover:hover .tooltip {
/* display tooltip on hover */
opacity: 1;
}
<div class="hover">hover
<div class="tooltip">asdadasd
</div>
</div>
FIDDLE
Solution 2 - Html
Using the title attribute:
<a href="#" title="Tooltip here">Link</a>
Solution 3 - Html
Similar to koningdavid's, but works on display:none and block, and adds additional styling.
div.tooltip {
position: relative;
/* DO NOT include below two lines, as they were added so that the text that
is hovered over is offset from top of page*/
top: 10em;
left: 10em;
/* if want hover over icon instead of text based, uncomment below */
/* background-image: url("../images/info_tooltip.svg");
/!* width and height of svg *!/
width: 16px;
height: 16px;*/
}
/* hide tooltip */
div.tooltip span {
display: none;
}
/* show and style tooltip */
div.tooltip:hover span {
/* show tooltip */
display: block;
/* position relative to container div.tooltip */
position: absolute;
bottom: 1em;
/* prettify */
padding: 0.5em;
color: #000000;
background: #ebf4fb;
border: 0.1em solid #b7ddf2;
/* round the corners */
border-radius: 0.5em;
/* prevent too wide tooltip */
max-width: 10em;
}
<div class="tooltip">
hover_over_me
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis purus dui. Sed at orci. </span>
</div>
Solution 4 - Html
This one is very interesting,
> HTML and CSS only
.help-tip {
position: absolute;
top: 18px;
left: 18px;
text-align: center;
background-color: #BCDBEA;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
}
.help-tip:before {
content: '?';
font-weight: bold;
color: #fff;
}
.help-tip:hover span {
display: block;
transform-origin: 100% 0%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip span {
display: none;
text-align: left;
background-color: #1E2021;
padding: 5px;
width: 200px;
position: absolute;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
left: -4px;
color: #FFF;
font-size: 13px;
line-height: 1.4;
}
.help-tip span:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #1E2021;
left: 10px;
top: -12px;
}
.help-tip span:after {
width: 100%;
height: 40px;
content: '';
position: absolute;
top: -40px;
left: 0;
}
<span class="help-tip">
<span > This is the inline help tip! </span>
</span>
Solution 5 - Html
Pure CSS:
.app-tooltip {
position: relative;
}
.app-tooltip:before {
content: attr(data-title);
background-color: rgba(97, 97, 97, 0.9);
color: #fff;
font-size: 12px;
padding: 10px;
position: absolute;
bottom: -50px;
opacity: 0;
transition: all 0.4s ease;
font-weight: 500;
z-index: 2;
}
.app-tooltip:after {
content: '';
position: absolute;
opacity: 0;
left: 5px;
bottom: -16px;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent rgba(97, 97, 97, 0.9) transparent;
transition: all 0.4s ease;
}
.app-tooltip:hover:after,
.app-tooltip:hover:before {
opacity: 1;
}
<div href="#" class="app-tooltip" data-title="Your message here"> Test here</div>
Solution 6 - Html
Another similar way to do it by css:
#img { }
#img:hover {visibility:hidden}
#thistext {font-size:22px;color:white }
#thistext:hover {color:black;}
#hoverme {width:50px;height:50px;}
#hoverme:hover {
background-color:green;
position:absolute ;
left:300px;
top:100px;
width:40%;
height:20%;
}
<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/
Solution 7 - Html
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>
Solution 8 - Html
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;
}