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 change css content hover effect background color css php in this situation?

    How to style button inputs to be identical in Chrome and Firefox?

    How can I adjust the margins of quote symbols added with CSS

    How to center a border-width shape properly, relative to its parent input button?

    How to make possible vertical scroll on popup and disable vertical scroll for page by using CSS?

    How do I create two columns using CSS?

    Ideas with how to draw a specific large amount of circles on a page using a loop

    Bootstrap - How to ensure white space on far left and far right on mobile

    how to create a facebook look alike gallery with css and jquery? [closed]

    asp .net: how to change css on span tag in c#

    how to make slide animation?

    How to create one UL menu similar to another

    How do prevent a div from resizing? [closed]

    How to add spacing between two rows of multiple divs each

    how to apply transition effect in expand/collapse inside gridview rows

    How to do this: A fluid-width parent element, with a fixed-width and a fluid-width child element?

    How to change this FontAwesome to image in Css?

    How to change text direction of every line of text using javascript/jquery?

    How do I make a DIV tag stretch to the size of it's children?

    HTML code to show splitted data_frame in one html page using python

    How to program the navigation bar(image) web html

    CSS - How do I float one element to the right inside the other div?

    How to mark up a tiled layout with CSS?

    How to apply CSS(background image) to radiobutton when it clicks?

    How to convert HTML button to HTML input, while keeping all CSS?

    CSS how to make a perfectly alligned left (or right) border?

    CSS: How to set hover effect on menu-item when submenu-item is displayed

    Newbie: How to have a row background in my case?

    Slideshow using MooTools JavaScript - How can I position slideshow to rescale in browser window

    CSS: How to fit a circular progress bar according to screen size (mobile)