Apps

Create a tool tip text-box element using jQuery, CSS3, and HTML5

Ryan Boudreaux shows you how to create an easy tool tip element for your website using jQuery, CSS3, and HTML 5.
Tool tips have long been used in desktop word processing applications within the toolbar, where upon hovering over a particular item; a "tool tip" appears providing a short description of the selected function. Figure A displays the "Print Preview" tool tip in Microsoft Word, as an example.

Figure A

Tool tips have come a long way since the 1990s and have become common on websites as a GUI element that alerts readers to definitions, tips, and informative hints relating to the content. This tutorial will demonstrate how to use jQuery to display a text box using CSS3 styling within an HTML5 web page document.

The tool tip will take effect on any anchor <a> that has a class equal to tooltip (class="tooltip") and also contains a title attribute; on hover over the anchor, the tool tip will display the text of the title. This tool tip is easy to apply, as most of the work is done by the CSS3 and jQuery function.

The HTML5

First, we will start with several HTML5 elements in our web document including the doctype, character set, and meta description. Other HTML5 elements include header, hgroup, and section. The HTML5 web document page code snippet is displayed below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Tooltip Using jQuery, CSS3, and HTML5 ~ Demo</title>
    <meta name="description" content="Tooltip Using jQuery, CSS3, and HTML5"></meta>
    <script src="scripts/jquery.js" type="text/javascript"></script>
    <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
</head>
<body>
    <section class="topsec">
      <header>
          <hgroup>
            <h1>Demo ~ Tool tip Tutorial</h1>
            <h2>Using jQuery, CSS3, and HTML5</h2>
          </hgroup>
      </header>
    </section>
    <section class="main">
    </section>

Within the main section we will add in our example anchors with the appropriate class and titles that we want to have displayed as tool tips. The code snippet below is added to the main section as one of the example tool tips.

<p>Typically, you will find tool tips are used to help define a term or acronym, for example <a href="" class="tooltip" title="Hypertext Markup Language" >HTML</a>, or <a href="" class="tooltip" title="Cascading Style Sheet" >CSS</a>.

Note that the anchor href attribute examples above do not actually specify a URL, they are specifically left blank (href="") so that only the tool tip is displayed, and when clicked, the anchor does not lead to any other web page.

The CSS3

The styles utilized in this demonstration illustrate several CSS3 properties including background-image, text-shadow, border-color, box-shadow, and border-radius.

Playing with the border-color property

Of particular note is the border-color property, which will be used in creating our tool tip pointer. The basics of working with the CSS3 border-color styles were originally reviewed in my post from last October, "Working with new styling for Borders in CSS3". The syntax for border-color is displayed as border-color: top, right, bottom, left; and if only one color is specified, it is applied to each side of the element. Playing around with this, we can create an element with three transparent sides and only one side with color, and when we bring down the height and width to 3 pixels each, we form a small pointer triangle. The CSS3 styling code snippet for the tool tip pointer triangle is displayed below:

a.tooltip:after {
      border-width: 12px;
      border-style: solid;
      border-color: transparent transparent rgb(124,194,152) transparent;
      content: "";
      display: none;
      height: 3px;
      width: 3px;
      position: absolute;
      top: 10px;
      right: 10px;
}
Notice that the top and right are defined at 10px so that the top of the triangle is blunted somewhat and so it is positioned ten pixels from the right side of the element. The triangle pointer sample is displayed in Figure B below:

Create an unordered list bullet using the border-color and border width properties

There are other ways of manipulating the border-color property to create triangle shapes: you can also define the border-width of the element it applies to, and in this case the list item, by setting each side of the element to a specific setting, as demonstrated in the CSS3 code snippet below:

li:before {
    content: "";
    border-color: transparent #1020AF;
    border-style: solid;
    border-width: 4px 0 4px 5px;
    display: block;
    height: 0;
    width: 0;
    left: -10px;
    top: 15px;
    position: relative;
}

Notice the border-width with a top of 4px, right side of 0, bottom of 4px, and the left side set to 5px; also note the border-color is set to transparent and #1020AF, and the bullet is set to a left of -10px, and a top of 15px, with a relative position.

Figure C

The tool tip title text-box area

Styling the tool tip title text box area, we will incorporate hover, before, and after with our tool tip anchor and utilize several CSS and CSS3 properties such as background-image, content, cursor, text-decoration, border-radius, box-shadow, and border-color. The CSS code snippets for the tool tip styling are displayed below:

a.tooltip:hover {
      position: relative;
      z-index: 100;
      cursor:alias;
}

Note that the tool tip hover is styled with a z-index of 100; this ensures that it will always display above or on top of all other existing content on the page. It is also set with a relative position, and the cursor is defined as alias.

a.tooltip:before {
 background-image: linear-gradient(bottom, rgb(69,158,100) 41%, rgb(124,194,152) 87%);
 background-image: -o-linear-gradient(bottom, rgb(69,158,100) 41%, rgb(124,194,152) 87%);
 background-image: -moz-linear-gradient(bottom, rgb(69,158,100) 41%, rgb(124,194,152) 87%);
 background-image: -webkit-linear-gradient(bottom, rgb(69,158,100) 41%, rgb(124,194,152) 87%);
 background-image: -ms-linear-gradient(bottom, rgb(69,158,100) 41%, rgb(124,194,152) 87%);
 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.41, rgb(69,158,100)), color-stop(0.87, rgb(124,194,152)));
 content: attr(text-tooltip);
 display: none;
 font: 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
 padding: 5px 7px;
 position: absolute;
 top: 33px;
 right: 0;
 color: #144758;
 text-decoration: none;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 -moz-box-shadow: 0px 0px 6px #459e64;
 -webkit-box-shadow: 0px 0px 6px #459e64;
 box-shadow: 0px 0px 6px #459e64;
 min-width:190px;
}

Note, in the snippet for the tool tip before styling above, that the background-image is set for most browsers with a linear gradient running from the bottom to top starting with the rgb(69,158,10) and a 41% transition to the rgb(124,194,152) color. The content styling property points to the attribute text-tooltip, which is called from the jQuery function. Other tool tip text box properties of note include the border-radius, which is set to 10px; the box-shadow, which is set to 0px 0px and 6px with a color of #459e64; and finally, the minimum width is set to 190px. Next, we set the anchor tooltip: hover:before and after with a display set to block, as shown in the code snippet below:

a.tooltip:hover:before, a.tooltip:hover:after {
      display: block;
}

The jQuery

We set the jQuery code within the script <script> at the bottom of the web page document but before the closing body tag </body>. Putting the scripts at the bottom of the page help to speed up page load times, as a rule, and this is why I put all of my scripts just before the closing body tag.

<script type="text/javascript" language="javascript">
   // Document ready function
    $(document).ready(function(){
       $("a.tooltip").TheToolTip();
    });
    jQuery.fn.TheToolTip = function() {
       return this.each(function(){
          jQuery(this).attr({'text-tooltip': jQuery(this).attr("title")}).removeAttr("title");
    });
   };
</script>

The jQuery starts with the document ready function, and then, for each instance of "this" element, it adds the new attribute with the title's current value and then it removes the title attribute.

The tooltip in action is displayed in Figure D below.

Figure D

You can download the code snippets (HTML, CSS, jQuery) for this tutorial here.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

1 comments
tlei123
tlei123

I gotta say... Implementing custom tool tips on tags seems like gold-plating work to me. All the modern browsers have built-in, pop-up tool tips for tags if you just add your tool tip texts as title attributes: Tool Tip Example Check out the Subscribe and Email buttons at the top of the tutorial and you can see the browser-default tool tips in action -- these buttons are actually tags with background images! I can see a need for custom tooltips if your client insists, but the CSS in this tutorial just makes them look even WORSE to me.

Editor's Picks