Simple JQuery Tooltip

There are some great JQuery tooltip plugins out there, such as qTip2. In fact, I use qTip2 on this site because of how robust I think it is. However, sometimes, on smaller sites, you don’t want to load all that excessive code built to work in hundreds of different configurations just for a handful of tooltips. Well have no fear. Here’s how you can build a simple tooltip. Using a little JQuery, and some CSS3 (for the speech bubble discussed in my previous article and the question mark icon) you can make your own tooltips!

Here’s what we’ll be making:

This sentence needs more of an explanation for the user. ?

Now let’s get into the code needed to produce the example. The HTML is actually very simple. We are going to inject the content for the tooltip using JQuery so we won’t even need anything to target except the link that you hover on that triggers it.
Here’s the HTML:

<p>This sentence needs more of an explanation for the user. <span class="question">?</span></p>

The CSS looks pretty long. But in reality, it is built to my own personal liking. The "question" class applied to a span produces the question mark circle icon. You can easily do this with an image if you prefer, or apply it to a simple link with text or a question mark without any styling. Then there are two items for the "tooltip" class. The first item defines what the tooltip will look like (rounded borders, background color, text styling, etc.). The pseudo class of :before (or :after if you like) inserts an item before (or after) the element it is applied to. In this particular instance, the :before statement adds the tip to the tool, which you don’t need to use if you don’t want, or again, you can use an background image if you prefer.
Here’s the CSS:

span.question {
  cursor: pointer;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #89A4CC;
  line-height: 16px;
  color: White;
  font-size: 13px;
  font-weight: bold;
  border-radius: 8px;
  text-align: center;
  position: relative;
}
span.question:hover { background-color: #3D6199; }
div.tooltip {
  background-color: #3D6199;
  color: White;
  position: absolute;
  left: 25px;
  top: -25px;
  z-index: 1000000;
  width: 250px;
  border-radius: 5px;
}
div.tooltip:before {
  border-color: transparent #3D6199 transparent transparent;
  border-right: 6px solid #3D6199;
  border-style: solid;
  border-width: 6px 6px 6px 0px;
  content: "";
  display: block;
  height: 0;
  width: 0;
  line-height: 0;
  position: absolute;
  top: 40%;
  left: -6px;
}
div.tooltip p {
  margin: 10px;
  color: White;
}

And lastly the Javascript is actually quite simple. You use the hover toggle event (hover, then unhover) to create it. On hover, we simply append the actual tooltip div and it’s content to the question mark icon. Then on unhover, we remove the tooltip element.
And finally, here’s the Javascript:

$(document).ready(function () {
  $("span.question").hover(function () {
    $(this).append('<div class="tooltip"><p>This is a tooltip. It is typically used to explain something to a user without taking up space on the page.</p></div>');
  }, function () {
    $("div.tooltip").remove();
  });
});

It really isn’t that bad, and it can easily be adjusted to work for several tooltips instead of just one. Got any questions? Comments? Just ask!

34 Responses to “Simple JQuery Tooltip”

  1. Travis Layne says:

    Well writted and minimal! Love it!

  2. ozer says:

    thanks man thanks!!! it is very very simple!

  3. Eduardo Pelegri-Llopart says:

    Nice; thanks much. You don’t have a formal license with this but I’ll assume you don’t mind people borrowing the code…

  4. Eduardo Pelegri-Llopart says:

    Thanks, David. Appreciated. And yes, I’m pointing back to you in the code.

  5. Amarja says:

    The tooltip is not getting displayed. I copied your exact same code.

    • David says:

      This tooltip requires jQuery, so make sure you are loading that in the head of your document. The JavaScript also needs to be in script tags if included on the page, so make sure you include those too.

  6. Ed says:

    How can I place the arrow on the bottom instead of the left?

    • David says:

      To move the arrow, you’ll need to adjust the border properties along with the top and left properties of the :before pseudo class. You’ll need the following different properties (notice the change of border-right to border-top and top to bottom, while everything else can stay the same).

      border-color: #3D6199 transparent transparent transparent;
      border-top: 6px solid #3D6199;
      border-style: solid;
      border-width: 6px 6px 0px 6px;
      bottom: -6px;
      left: 45%;

      You’ll need to change the absolute positioning of the tooltip to move the box too.

  7. ed says:

    Thanks for your help. It works great!!

  8. Rob says:

    Excellent post!

  9. Amrik Singh says:

    Wow, Excellent Work. Just 5 Min to Learn and Implement.

  10. aome guy says:

    is there a way to include a hyperlink within the tooltip in this example?

    • David says:

      Yes, but you’ll have to make some changes. If you toss a link into the paragraph tag, then that will work without any issues. The problem arises in the javascript because of the hover/unhover event. As soon as you leave the question mark, the tooltip hides, thus making it impossible to click the link. You could remove the unhover event and add a close link inside the tooltip with the same functionality, thus keeping the tooltip open and allowing the link to be clicked.

  11. Trinity says:

    This is great! Can you show an example that uses several tips on one page?

    • David says:

      That’s pretty simple actually. Instead of hardcoding the tooltip text in the javascript, you’ll want to rely on the question span to handle that. Add a title attribute into the question span with whatever text you want in your tooltip. Then, adjust the javascript line to reference that attribute:

      var tooltipText = $(this).attr(‘title’);
      $(this).append(‘

      ‘ + tooltipText +

      ‘);

      I’m planning on making a very light plugin soon that will handle just these issues. Subscribe so you get notified when I post it.

      Hope that helped!

  12. Venkatesan says:

    good One ! Is it possible to use the same jQuery to display several tool tip messages. say I have 4 textboxes and want to display tooptip for each seperately. Thanks in advance….

    • David says:

      It’s possible, but you’ve got to make a few adjustments if you want unique text in each tooltip. You’ll have to pull the tooltip text out of the javascript and add it into a title attribute on the question span. Then, you’ll just need to reference that by adding in the text via a $(this).attr(‘title’).

  13. Venkatesan says:

    I want the tooltip message to be displayed on left side of the cursor. Is it possible?

  14. Venkatesan says:

    Many Thanks for your reply though.I have done it 🙂

  15. Venkatesan says:

    Now, I want the tooltip message to be displayed on left side of the cursor that too via CSS. Is it possible?

  16. Danno says:

    Hi David, like someone mentioned before I would like to include a link in the speech bubble. But I’d like to do it without needing to manually close the tooltip. Is there a way to add a delay for hiding the tooltip. I tried $(“div.tooltip”).delay(800).remove(); which didn’t work but would that be along the right lines?

  17. Danno says:

    Ah I got it eventually, for anyone wondering, I just replaced the line (or rather comment it out)

    $(“div.tooltip”).remove();

    with

    $(‘div.tooltip’).delay(1000).hide(1, function() {
    $(this).remove();
    });

    Not that I understand any of it but it seems to work.

  18. hossein says:

    it is very simple and vey nice
    thanks

  19. Julia says:

    Hi

    I would like to display different messages on a helper icon in a form. I read your replies above about adding
    var tooltipText = $(this).attr(‘title’);
    $(this).append(‘ ‘);

    or $(this).attr(‘title’)

    Could you post the entire code in the following format please, with your reply in the correct position?

    $(document).ready(function () {
    $(“span.question”).hover(function () {
    $(this).append(‘This is a tooltip. It is typically used to explain something to a user without taking up space on the page.’);
    }, function () {
    $(“div.tooltip”).remove();
    });
    });

    I am just a web designer trying to jazz up my form without long winded plugins. I prefer simple things 🙂 Thanks in advance and great work.

    • David says:

      This is hopefully what you are looking for and should work. Just make sure to add a title attribute to the question span that includes the tooltip’s text. Let me know if you have any trouble or further questions.

      $(document).ready(function () {
      $("span.question").hover(function () {
      var tooltipText = $(this).attr('title');
      $(this).append('<div class="tooltip"><p>' + tooltipText + '</p></div>');
      }, function () {
      $("div.tooltip").remove();
      });
      });

  20. Julia says:

    That’s perfect thank you.

  21. Mike Yo says:

    David,
    Great tutorial, thanks!
    I have set up a demo, showing how to easily put different content in each tooltip and also showing left tooltip, rather than the right tooltip in this tutorial.
    I have also revised some text styling etc., just a few.
    Note, I didn’t use the “title” attribute because it adds additional browser-tooltip when hovering, which is not necessary and annoying.
    Instead I used an attribute called “content”.
    I am not a js/css expert in any way, so if you find any issue with the code, please feel free to post a fix here.

    Demo link:
    http://jsfiddle.net/dr_lucas/A2VLP/2/

  22. vasanth says:

    Thanks for your code. i have an query. How can hover the box and click some link in the tool tip content.

    • David says:

      You can either add a delay on the unhover part of the function, or you can add a clickable “close” link in the tooltip and attach the close function to that instead of the unhover.

  23. Dwight says:

    Thanks for the code and clear documentation. I’m new at this and I was able to make the multiple messages to work.

  24. sandeep says:

    Hi,this tool tip worked fine for the static pages. But when we load dynamic contents in the jsp page eg, using Ajax call, the tooltip nolonger works for the newly loaded elements on the page.
    Do we have any solution for this.

    • David says:

      If you use the .on(“click”, ‘.class-identifier’, function(){}); function, you can avoid this issue.

  25. manjunath says:

    Very well written with minimal code, it is very helpful indeed.