Tooltip with HTML content without JavaScript

Question

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 1

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

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

Answer 2

Using the title attribute:

<a href="#" title="Tooltip here">Link</a>