WordPress style tooltip css: Add a custom tooltip to any element, no plugin!

This article was written by in November 9, 2013, & may not be posted on other sites!
Original source url for this article: WordPress style tooltip css: Add a custom tooltip to any element, no plugin!

WordPress style tooltip css: Add a custom tooltip to any element, no plugin just code!
When using the title attribute on a link or image, the browser will automatically show a small helptext box, the tooltip. It might be difficult to style this “title” tooltip using css, read more at the end of this article. Let’s start with a simple solution to add a custom styled tooltip to any element in your worpress site or in any html document. Only CSS needed, This is how to:

 

1. Add a custom style WordPress tooltip to any html element.

Wordpress style tooltip css: Add a custom tooltip to any element, no plugin just code!

  1. Find the id or class of the element you would like to add a tooltip to. This is best done using Firebug in Firefox or Chrome developer tools for example. If you would like to add a tooltip to a menu item the selector might be:
    #menu-item-10 or even #menu-item-10 a
  2. In your css file, add this code to your class / id to add the tooltip text and css styling:
    #menu-item-10:hover:after{
    content: 'This is your custom tooltip text';
    border: 1px solid #cccccc;
    background-color: #efefef;
    position: absolute;
    padding: 3px 8px;
    font-size: 12px;
    z-index: 9999;
    margin-left: -80px;
    margin-top: 30px;
    width: 130px;
    }

You can style the tooltip box any way you like. With the margin-top and margin-left selectors you can control where the tooltip is displayed relative to your selected element.

 

 

2. How to style the title attribute as a tooltip, basic css.

Wordpress style tooltip css: Add a custom tooltip to any element, no plugin!

In this example we are styling the tooltip produced by the title attribute. If you get double tooltips, one default and one styled, simply Change the word “title” to something else, for example:
tooltip="Hi, I am a link", and in the css a[tooltip]:hover:after{
content: attr(tooltip);

HTML:
<p>This is some fine text in a beautiful paragraph. And here comes a link with the title attribute: <a href="#" title="Hi, I am a link">This is a link</a>. Is it possible to style the default tooltip shown on mouse over when using the title attribute? Let's find out! <a href="#" title="I am another link">This is another link</a> to demonstrate how to style the tooltip with CSS.</p>

CSS:
a{
color: #d6005e;
}
a:hover{
color: #ff2283;
position: relative;
}
a[title]:hover:after{
content: attr(title);
padding: 8px 12px;
color: #85003a;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0px 0px 2px #c0c1c2;
-webkit-box-shadow: 0px 0px 2px #c0c1c2;
box-shadow: 0px 0px 2px #c0c1c2;
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #eeeeee));
background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee);
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
background-image: -ms-linear-gradient(top, #ffffff, #eeeeee);
background-image: -o-linear-gradient(top, #ffffff, #eeeeee);
}

 

More tooltip css styling examples and demo download:

 

Spread the word

Facebooktwittergoogle_pluslinkedinmail

Leave a Reply

Your email address will not be published. Required fields are marked *