gaetanm gaetanm - 4 months ago 17
HTML Question

Tooltip with HTML content without JavaScript

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.

Answer

I have made a little example using css

HTML:

<div class="hover">hover
    <div class="tooltip">asdadasd
    </div>
</div>

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;
}

FIDDLE

http://jsfiddle.net/8gC3D/471/

Comments