Styled Tool-tips

Simple and elegant styled tool-tips

by Jennifer Perrin

HTML

<p>Lorem ipsum dolor sit amet, donec nunc nam ullamcorper, risus placerat fringilla, vivamus nibh morbi adipiscing tincidunt. Luctus sodales maecenas nec, neque wisi aenean. Dui quia faucibus sollicitudin habitasse ligula id, varius vestibulum ultrices. Fusce malesuada, at in at, sed tellus wisi faucibus perspiciatis varius. Lobortis suspendisse nulla magna massa curabitur wisi, <a href="#" data-tooltip="Lorem Ipsum.">pulvinar proin maecenas</a> non magna.</p>

<p><a href="#" data-tooltip="Purus et Egestas.">Purus et egestas nam consectetuer nulla</a>, dapibus ac lorem aenean, interdum sed pede commodo, justo suspendisse adipiscing pede nulla sit porttitor.</p>

CSS

body { margin:20px; }
p { margin:10px; }

a {
    position: relative;
    text-decoration: none;
}

a:after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 130%;
    left: 20%;
    background: #d79800;
    padding: 5px 15px;
    color: black;
    -webkit-border-radius: 10px;
    -moz-border-radius   : 10px;
    border-radius        : 10px;
    white-space: nowrap;
    opacity: 0;
    -webkit-transition: all 0.4s ease;
    -moz-transition   : all 0.4s ease;
}

a:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 20px solid #d79800;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    -webkit-transition: all 0.4s ease;
    -moz-transition   : all 0.4s ease;
    opacity: 0;
    left: 30%;
    bottom: 90%;
}

a:hover:after {
    bottom: 100%;
  }
  a:hover:before {
    bottom: 70%;
}

a:hover:after, a:hover:before {
    opacity: 1;
}