How can I create custom tooltips with css pseudoelements

Tags: css,css3,pseudo-element,css-shapes

Problem :

I am reading css-tricks and in the end I can see the following.

Using an HTML5 data attribute, then pulling that attribute in and styling it as a pseudo element, we can create completely custom tooltips through CSS.

enter image description here

The problem is that the link inside of the article is dead, and I am not such a good html/css guy to be able to understand how to do this. Can anyone help?

Solution :

JSFiddle is here. Note: The original content is here.


<p>Vestibulum mollis mauris <a href="#" class="tooltip" title="Sample tooltip">pellentesque</a></p>


.tooltip {
    display: inline;
    position: relative;

.tooltip:hover {
    color: #c00;
    text-decoration: none;

.tooltip:hover:after {
    background: #111;
    background: rgba(0,0,0,.8);
    border-radius: .5em;
    bottom: 1.35em;
    color: #fff;
    content: attr(title);
    display: block;
    left: 1em;
    padding: .3em 1em;
    position: absolute;
    text-shadow: 0 1px 0 #000;
    white-space: nowrap;
    z-index: 98;

.tooltip:hover:before {
    border: solid;
    border-color: #111 transparent;
    border-color: rgba(0,0,0,.8) transparent;
    border-width: .4em .4em 0 .4em;
    bottom: 1em;
    content: "";
    display: block;
    left: 2em;
    position: absolute;
    z-index: 99;

    CSS Howto..

    How to style nested panel controls in ASP.NET

    How to make sure Text always stays on top of Image (even when resizing)?

    Does anybody know how I can adjust this CSS to achieve the desired hyperlink effect I'd like?

    How do I stop the text from moving when hovered? (background-image is involved)

    How can clients without Ruby view web pages using SASS?

    How do I make a CSS sprite that controls multiple background images for multiple DIV's?

    CSS: how to keep image never modified with same “offset” all the time?

    jQuery hide() and show() not working as expected

    How to convert bullet points into horizontal list?

    Attempting to show logo using 'content' from CSS

    Css styling without !important - how to do this?

    Modernizr: how do I detect CSS display:table-cell support?

    How to get the element background image in html using javascript

    how to format a single html a href text to have multiple css properties (two different font families)

    How do you group similar n-th child selectors? [duplicate]

    How do you create a scrolling window over a still background image with CSS?

    How to design this html Box for legacy browsers

    How to display print preview as same as the webpage using css?

    How to switch “controlgroup” background color

    How i can force my div to display in block?

    How to do expand and collapse for table column in html file?

    How can I compress / gzip my mimified .js and .css files before publishing to AWS S3?

    how to position a div below an absolute div in css

    How to apply css to iframe content? [closed]

    How does CSS float work when applied to an “ul” element

    CSS - how to dry up?

    How are CSS elements combined

    When I use
    • , how to let the element inside the li float left but the

    How to vertical align element relative other element with pseudo-class? [duplicate]

    How to position two divs on the absolute front of a page, but with one over the other? CSS