Basic default tooltip produced by the "title" attribute

This link uses only the "title" attribute to produce a default tooltip.
This is a link with a basic tooltip box, no styling at all. This is what a default tooltip looks like in your browser.

Example 1 - basic CSS using a span

This link use a span instead of the "title" attribute to produce a tooltip.
This is a link with a css tooltip box. This content is shown inside the tooltip box on mouse over. This tooltip is styled with basic css.

Example 2 - CSS 3 using a span

This link that use a span instead of the "title" attribute to produce a tooltip.
This is a link with a css3 tooltip box. This content is shown inside the tooltip box on mouse over. We are using CSS3 to style this tooltip.

Example 3 - CSS 3 advanced using a span, text and an image.

This link that use a span instead of the "title" attribute to produce a tooltip.
This is a link with a css3 tooltip box. Custom tooltip
CSS3 tooltip image This custom content is shown inside the tooltip box on mouse over.

We are using CSS3 to style this custom tooltip.
We are using CSS3 to style this tooltip.

Example 4- basic CSS styling the "title" attribute tooltip

This is some fine text in a beautiful paragraph. And here comes a link with the title attribute: This is a link. Is it possible to style the default tooltip shown on mouse over when using the title attribute? Let's find out! This is another link to demonstrate how to style the tooltip with only CSS.