Only CSS hover over with html content ( Tool-tip )

We have lot of ways to handle hover over popups or too-tips. This is one of easiest way I feel as it has only CSS to show the pop up.

Advantage here is we can add html content inside the popup.

Please find code snippet as follows:


Markup Snippet:




IF you observe in the above snippet it uses a hierarchy of anchor and span tags to show the magic popup.

Make sure you will not change the hierarchy.


Style Snippet:



This style has configured to support IE9+ browsers and other latest ones.


I tries same in VF page and found it is working correctly, a simple version can look like the following snippet:



Thanks.