Zebra_Tooltips, a lightweight tooltips jQuery plugin

Get the latest updates on this jQuery plugin via RSS

You are currently browsing comments. If you would like to return to the full story, you can read the full entry here: “Zebra_Tooltips, a lightweight tooltips jQuery plugin”.

95 responses to “Zebra_Tooltips, a lightweight tooltips jQuery plugin”

Follow the comments via RSS
  • Martin, 2013-10-18, 16:31

    I would like to be able to show tooltips programmatically based upon the user clicking on an icon. Something like…

    I am trying the following…

    var zt = new $.Zebra_Tooltips($(".tooltip"), { 
      'position': 'right', 
      'background_color': 'Blue' 
    zt.hide($(".tooltip"), true);
    $("a.help").click(function () {
      zt.hide($(".tooltip"), true);
      zt.show($(this).next(), true);

    This almost works, but it always shows the first tooltip and the mouseover still activates the first time you hover over a field with a tooltip attached.

    Can you help?

    • Martin, 2013-10-18, 16:34

      Sorry; formatting went totally wrong (did I miss something?)
      label …
      a class=”help”…
      input title=”my tooltip text”…

      var zt = new $.Zebra_Tooltips($(“.tooltip”), { ‘position’: ‘right’, ‘background_color’: ‘Blue’ });
      zt.hide($(“.tooltip”), true);

      $(“a.help”).click(function () {
      zt.hide($(“.tooltip”), true);
      zt.show($(this).next(), true);

    • Martin, 2013-10-18, 18:54

      It is ok; I have solved it.
      show and hide do not expect selectors; they are expecting single elements. I wrapped my calls to both with a jQuery each() and now it works.

  • Martin, 2013-10-18, 18:55

    Is it possible to have arrows on the left and/or right (left is more important) and then align the tooltip accordingly?

    • Stefan Gabos, 2013-10-18, 21:28

      nope, that is not currently possible

  • Basti, 2013-11-21, 18:19

    Hello Stefan! First of all thanks for your work and sharing it here! Everything worked fine when i used your tooltip script.

    I have one question, is it possible to show the tooltip only above the word and not changing to show it below when there is not enough space above it.

    Is there a way to change the code for that? Would be a great help!

    Thank you very much,


  • kpc, 2013-12-09, 22:07

    I like this plugin so far but it would be nice if you fixed IE and FF max_width. Changing max_width doesn’t affect IE and FF, causes a word in one of my tips to kick down to a second line. In FF it’s even weirder, one tooltip with two words will kick down a word to a second line but another tooltip with three words won’t, and yet still another tooltip with three words will. The length of the words of the one with two words is not longer than either of the other two with three words. onMax_width works fine in Chrome. However, in Chrome the tooltip’s vertical_offset is different than FF, IE or Safari which are all about the same. It would be nice if you could work out cross browser compatibility issues.

  • kpc, 2013-12-09, 23:13

    I really like your jquery plugin but there are some cross browser issues. Chrome on Windows 8.1 has the vertical_offset lower than on FF, Safari, and IE for Windows 8.1.

    Max_width doesn’t seem to be working for IE or FF because words are being forced down to a second line in my setup while in Safari and Chrome it takes the max_width and does not do the same.

  • kpc, 2013-12-10, 01:15

    Hmmm, must have been a caching issue. I swear I cleared cache on all the testing and cross comparison I was doing. It seems to be working fine now in all four (FF, Chrome, Safari, IE). I was using Desktop Server when doing this. But, now they all work on a live server. This is very good!

    • Stefan Gabos, 2013-12-10, 10:43

      actually, there’s is a real problem with that that has been reported by more people and that i’ve been also able to reproduce from time to time but I could not find a fix for it. sometimes it happens and sometimes it doesn’t and it depends on the words and/or the letters in the words, i have no idea

  • kpc, 2013-12-10, 22:19

    Yes, the problem is still there. We are using Adobe Typekit to add out fonts. We’re using Cora. I’ve tried using Myriad-Pro with this issue as well and it still repeats. Before I add Adobe Typekit to the site it works perfectly across all Window 8.1 major browsers, but when I install typekit for Cora or Myriad-Pro in FF and IE I get words kicked down to a second line and in Chrome the target for the tip is like 20pixels off target for the vertical offset, it lands below target and covers the icon. That’s the one that is a bummer. I did send this issue to Adobe Typekit, maybe that is the issue in my case? Oh, I can’t determine the default font before I install typekit but it’s something like Times, not something we want to use, but it doesn’t interfere with the jQuery. I’ve also played around with line-height, padding, max-width and can’t affect a change. Max_width doesn’t seem to want to apply for FF and IE, and the vertical_offset thing in Chrome I have no idea for a workaround.

  • Anil, 2014-03-05, 14:16

    I have multiple tool tips on page –
    1) How can i change text for the selected tool tip.
    2) How to remove the selected tool tip.

    Can you help me with these issues?


    • Stefan Gabos, 2014-03-27, 12:06

      1. attach a callback function to the onShow property; the callback receives as second argument the tooltip element and you’ll be able to change the text
      2. that is not currently possible

  • vinoth, 2014-04-17, 16:50

    Hi Stefan Gabos,

    Your plugin is awesome. Could you please suggest me, on tools tips, some of the text are broken to next line and some of them are some at a stretch. Even though the smaller texts break but longer text won’t get breaks to next line. May I know the reason.

  • Daren, 2014-05-09, 13:26

    This is great, thanks for this! Could you please give an example of how to use the onHide event? I’m showing a tooltip programatically, and when the user closes it, I want to call a function. Here’s what I’ve done:

    $(document).ready(function () {
    // show tooltips for any element that has a class named “tooltips”
    // the content of the tooltip will be taken from the element’s “title” attribute
    var zt = new $.Zebra_Tooltips($(‘.tooltips’), {
    ‘position’: ‘left’,
    ‘onHide’: ‘doSomething()’
    zt.show($(‘.tooltips’), true); // destroy on close

    function doSomething(){
    alert(‘hello world’);

    But nothing happens when you click “Close”. What am I doing wrong? Thanks again.

    • Stefan Gabos, 2014-05-11, 17:27

      that is because you attached a string to the onHide event (because of the quotes).

      you should either write it like

      'onHide': doSomething

      and define your function like

      var doSomething = function() {...}

      or, simpler

      'onHide': function() {
        alert('hello world');
  • don, 2014-06-27, 16:37

    Love your tooltips. Works great.
    Any way to have a photo come up instead of the bubble message?

  • Ramesh, 2015-04-28, 14:14

    Thanks for a very good plugin.

    Is it possible to redraw the tool tip with new position on every hover of the table header?
    I have more than 10 columns in a table inside DIV container.
    The position of the tooltips are same and this misleading to some other headers after the horizontal scroll of the DIV.

    Please help on this


  • Farant, 2015-06-08, 11:45

    Hey Stefan,
    i use your tooltip plugin in a slider (bxSlider). Problem: when i go to the next slide, the position of the tooltip element ist wrong. How can i change the position of the tooltip div? I try to change it with position() but it does’nt work.
    Thank you very much

  • Supriya, 2016-02-19, 14:15

    I’m using this plugin for my site. Its working fine in all browsers except in internet explorer. let me know what would be the reason for this. Plugin’s downloaded file also working fine but not mine. If any one could help, it would be appreciable.

    • Stefan Gabos, 2016-02-19, 18:16

      What version of Internet Explorer? What it the code you are usins? Can you show me the page?

  • Dimitar, 2016-03-11, 17:50

    I have a problem. I have to make tooltip…but on element, which is possition:fixed. But i cannot make the tooltip follow the element while scrolling. Any help about that ?


Leave a Reply

Your email address will not be published
You can use <strong>, <em>, <a>, <img>, <code>
Characters are not case-sensitive