This website uses cookies to personalise ads and to analyse traffic ok
web design

Style-my-tooltips jQuery plugin

Style-my-tooltips jQuery plugin

A simple, lightweight jQuery plugin to enhance the look of browser tooltips. Small in size (4kb unminified) script that works just like browser’s native tooltips with few options and styling via CSS. If you ever wished for altering the default look of browser tooltips for your project, read on!

Style-my-toolips does exactly what its title says: styles browser default tooltips. The javascript generated tooltip behaves and functions exactly like browser’s native tooltip, meaning it is always visible within the viewport and its position is relevant to cursor position. Please note that this is not a fixed positioned modal pop-up tooltip. You cannot insert html code in it (links, images etc.). The script gets elements with title attribute and generates tooltips with the attribute text.

How to use it

Download the archive which contains the plugin files and demo. Extract files and upload jquery.style-my-tooltips.js and style-my-tooltips.css to your web server.

Include style-my-tooltips.css inside the head tag your html document

<link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />

Include jquery and jquery.style-my-tooltips.js in your html document

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="jquery.style-my-tooltips.js"></script>

The code above can be inserted inside the head tag or at the very bottom of your document, before the closing body tag (which is normally recommended for better performance). In either case, it’s more efficient to include css files before any javascript (usually inside the head tag). As usual, we’re using Google’s CDN to get the jquery library.

What these files do

jquery is the javascript library used by the plugin (info: jquery.com).

jquery.style-my-tooltips.js is our plugin file

style-my-tooltips.css is the css file we use to style our tooltips. You could of course put the tooltip styling in your main stylesheet document to reduce http requests.

Call style_my_tooltips function on document ready (after the inclusion of the plugin files), either in the head or body tag

<script>
    (function($){
        $(document).ready(function(){
            $("[title]").style_my_tooltips();
        });
    })(jQuery);
</script>

Note that we’re wrapping our jquery code with (function($){ ... })(jQuery);. This ensures no conflict between jquery and other libraries using $ shortcut. See Using jQuery with Other Libraries for more info. Calling our function on document ready ($(document).ready()) is the standard, most common way used. It roughly means that our code will execute after the DOM is ready.

The [title] selector means that the plugin will apply to any element with title attribute (e.g. <a href="#" title="Link title">link</a>).

You can change the function call selector to anything you want (an id, class name etc.). For instance, to apply the custom tooltip on elements with title attribute that have a specific class (e.g. .myClassName) you change the selector as follows:

$(".myClassName[title]").style_my_tooltips();

You can also have multiple selectors by inserting comma separated values. For example the following applies only to anchor and image elements with title attribute:

$("a[title],img[title]").style_my_tooltips();

That’s all you need to use the plugin.

Configuration

style_my_tooltips function can get the following option parameters in order to customize its behavior and basic functionality:

tip_follows_cursor: Boolean
Tooltip follows cursor when hovering an element, values: true, false
tip_delay_time: Integer
Tooltip delay before displaying, value in milliseconds
tip_fade_speed: Integer
Tooltip fade in/out speed, value in milliseconds
attribute: String
Tooltip text source. Set an alternative attribute as source of the tooltip text (default is “title”)

An example of defining these options parameters and their default values is as follows

$("[title]").style_my_tooltips({ 
    tip_follows_cursor:false,
    tip_delay_time:700,
    tip_fade_speed:300,
    attribute:"title"
});

I’ve set the default values to simulate the exact behavior of native browser tooltips.

Styling your tooltip

You can style the tooltip via the style-my-tooltips.css file. The css below is the default one you can see on the demo.

#s-m-t-tooltip{
  /* basic */
  max-width:300px;
  z-index:10;
  margin:24px 14px 7px 12px;
  /* style and design */
  padding:8px;
  background:#222; /* fallback if rgba not supported */
  background:rgba(0,0,0,0.8);
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  -moz-box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
  -webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
  box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
  /* font */
  font-family:Verdana,Geneva,sans-serif;
  font-size:11px;
  line-height:16px;
  color:#fff;
}

Changelog

  • Jul 25, 2012
    • Added new attribute option for setting tolltip source.
      Minor code optimizations.
  • Jun 8, 2012
    • Complete plugin update. I’ve taken user input and feedback and re-wrote and optimized the code significantly. Changes include:
      Plugin automatically applies to dynamically generated elements.
      Tooltip default position is exactly like the browser’s native tooltips.
      Fixed all bugs regarding tooltip position when scrolling the page and hovering fixed or absolute elements. The tooltip is now always visible and correctly positioned.
      After extensive testing, elements original title attributes are re-applied on mouseout, click and mousedown events. With the added mousedown event, you can use the plugin along with complex web apps and pages.
  • Feb 7, 2012
    • Minor change in code to better position the tooltip.

License

This work is released under the MIT License.
You are free to use, study, improve and modify it wherever and however you like.
http://opensource.org/licenses/MIT


103 Comments

Post a comment

Comments pages: 1 2 3

  1. jucelin
    Posted on November 7, 2011 at 08:28 Permalink

    Thanks. Great job.

    Reply
    • Bar
      Posted on November 11, 2011 at 20:13 Permalink

      Unfortunate not working in IE9

      – Native title not stripped, so double Tootltips
      – On mouseout the tooltip is not releasing

      Reply
      • malihu
        Posted on November 11, 2011 at 21:29 Permalink

        I’ve tested the plugin on Internet Explorer 9 (version 9.0.8.112 on windows 7) and it works as expected. Can you provide any details on version/OS? Also, did you checked the demo or other implementation?

        Reply
  2. RC
    Posted on September 1, 2011 at 13:42 Permalink

    Hi, I am having trouble getting this script to work with special characters: “æ” “ø” “å”.

    Any idea what might fix this?

    Thanks in advance.
    -RC

    Reply
    • RC
      Posted on September 6, 2011 at 14:53 Permalink

      (and I have tried with charset UTF-8 but no luck..)

      Reply
  3. Damon
    Posted on August 29, 2011 at 22:27 Permalink

    Great script and tutorial. Thanks for providing! I’m using it on this site I’m developing on the top-right corner icons, but can’t figure out how to center the tooltip under each icon. Any clues? Thanks for your awesome work.

    Reply
    • Damon
      Posted on August 29, 2011 at 22:28 Permalink

      oops I meant to provide a link: http://dev.jessecology.com

      Reply
    • malihu
      Posted on August 30, 2011 at 16:12 Permalink

      Hi,
      This tooltip cannot be centered as it’s not positioned according to elements. It positions itself according to cursor exactly like native browser tooltips plus it calculates its position so it is always visible on browser viewport.

      Reply
  4. WG Kirschner
    Posted on August 19, 2011 at 15:30 Permalink

    Hallo malihu,
    verry nice tool as i’ve seen on your demo .
    now my question:
    is there any possibillity to style the box of tooltip to my color – border – font ect.?
    please send me yuur mail – with a realy bit claer description. because i’m not so familiare
    with the programming-code in jquery.
    thx
    WG

    Reply
    • malihu
      Posted on August 19, 2011 at 15:53 Permalink

      Hi,
      You don’t need any js/jquery skills 😉
      The styling of the tooltip (color, background, borders etc.) is done via CSS (by editing style-my-tooltips.css).

      Reply
      • WG Kirschner
        Posted on August 19, 2011 at 21:14 Permalink

        Hi Manos,
        ok ok!!
        Thank you for the tip.
        Another Poblem – display tooltip on first level on Browser-Desktop (Site-Level first).
        THX
        WG

        Reply
  5. Mark Simchock
    Posted on August 4, 2011 at 02:06 Permalink

    I grabbed your plugin for a little project I’m working on. I just wanted to say thanks.

    Reply
  6. Eyal
    Posted on August 2, 2011 at 14:14 Permalink

    Hi Manos,

    Thanks for the cool plugin. I bought you a coffee 😉

    A minor issue I encountered and fixed:
    If you have two elements with tooltip one next to the other, and you hover slowly over one and directly into the other (while the first tooltip is fading-in), the second tooltip won’t show at all.
    Reason: the fade-in callback of the first tooltip kills the second tooltip’s delay timer.
    My fix: clear the timer before the animation:
    function smtTip_fadeIn(){
    clearInterval(smtTip_delay);
    smtTip.fadeTo(“fast”,1);
    }

    Reply
    • malihu
      Posted on August 2, 2011 at 16:16 Permalink

      Awesome! Thanks for the coffee and posting the fix 🙂

      Edit: Plugin updated (8/7/2011)

      Reply
  7. Bela
    Posted on June 27, 2011 at 20:52 Permalink

    I had a problem with the faded out(opacity at 0) tooltip covering up form fields so the user couldn’t click in them.
    I changed your script around line 61 to the following to solve my problem
    smtTip.fadeTo(“fast”, 0, function () {
    smtTip.hide();
    });

    Reply
    • malihu
      Posted on June 28, 2011 at 20:40 Permalink

      Cool 🙂
      Thanks a lot for taking the time post this!

      Reply
  8. adasdas
    Posted on May 6, 2011 at 17:22 Permalink
  9. Levi Szekeres
    Posted on March 17, 2011 at 11:41 Permalink

    Hi,
    very fine work, I tried it, but I have a small problem. When I make the font size of the tooltip bigger, on bottom links the tooltip won’t show up, it gets in the way of the mouse. If I’m the only one with this problem, just ignore it, it’s not that important.
    I love your gallery scripts a lot.

    Thank You,
    Levi

    Reply
  10. Sanderling
    Posted on February 20, 2011 at 08:57 Permalink

    Thank you, I would appreciate the help!

    No, it isn’t ajax. It isn’t online, so I can’t give you a link, but I did set up a little example of the problem and can send you the zip file, if that’s okay with you. (Just respond to my email and tell me where to send the file.)

    I thought the culprit was the scrolling div, but in reproducing the problem I now realize that the real culprit is probably the image map! (I forgot to tell you that the tooltips within the scrolling div were attached to an image map.)

    I left the scrolling div in there, but if you peel off that tag you can see that the problem still occurs in IE—so it must be the map.

    Reply
  11. Sanderling
    Posted on February 19, 2011 at 23:29 Permalink

    Important detail!

    The content where this is happening is within a scrolling div (ie, with a fixed height and overflow set to auto, producing a scrollbar).

    I just tried the tooltips in an area of the page OUTSIDE of that scrolling div, and it worked as advertised.

    Is there any way to make this work inside my scrolling div??

    Reply
    • malihu
      Posted on February 20, 2011 at 04:20 Permalink

      Does the content load dynamically (e.g. via ajax)? Can you provide a link to see if I can help?

      Reply
      • Pedro Ferreira
        Posted on January 16, 2014 at 12:26 Permalink

        Yes! I ave an issue when page content is loaded via AJAX…
        Hope you can help me.

        Tooltip appears ver small (little box) with no content on it, if you laod the page more then once, without refreshing browser.
        It won’t work anymore.

        Thanks for any answer.

        Reply
  12. Sanderling
    Posted on February 19, 2011 at 23:19 Permalink

    Hello,

    I love these tooltips and want to use them, but I’m having a problem. On IE, both the native tooltip and the re-styled tooltip appear simultaneously. Do you know what could be causing this?

    The browser version is IE8.

    I varied from your instructions in one detail. I removed the line that calls jquery.min.js, because I already had 1.5 included on my site. To see if that was somehow the problem, I reverted to your precise instructions, but it didn’t make a difference.

    Any ideas?? I WANT TO USE THESE TOOLTIPS!!!

    Reply
  13. Brett Widmann
    Posted on January 29, 2011 at 02:37 Permalink

    I love this plugin!!! Thank you so much for the code.

    Reply
  14. asaf
    Posted on January 27, 2011 at 13:59 Permalink

    hi!
    About the problem that Mirrorshade raised:
    instead of to change the tooltip position from fixed to absolute you also can to change the following lines:
    smtMouseCoordsX= e.pageX;
    smtMouseCoordsY= e.pageY;
    (in the smtMouseMove() function that in the .js file)
    to:
    smtMouseCoordsX = e.clientX;
    smtMouseCoordsY = e.clientY;

    it is because of the “clientX” is relative to the window (and the “pageX” is relative to the document), and so- in page with a scrollbar- the tolltip position is correct.

    Reply
    • malihu
      Posted on January 27, 2011 at 14:43 Permalink

      Great!
      Thanks a lot for taking the time to post in detail an alternative solution.

      Reply
  15. Mirrorshade
    Posted on January 20, 2011 at 16:19 Permalink

    If using this script on pages with a scrollbar. The tooltip will not appear.
    This is because the position of the tooltip is set fixed.
    position:fixed;
    I changed this to:
    position:absolute;
    It works fine for me now. Tested IE8 and FF 3.6.13 and Safari 5.0.3

    Keep up the great work!

    Reply
    • malihu
      Posted on January 20, 2011 at 16:54 Permalink

      You’re absolutely right. Thank you so much for posting this! I thought I had updated the script and post but I completely forgot about it. I just updated the plugin. Thanks a lot 🙂

      Reply
  16. Paul
    Posted on January 11, 2011 at 01:16 Permalink

    If I use this tooltip together with colorbox, the title is not displayed in the colorobox-lightbox.
    I think there must be some code to release the title on image click.
    Can you help please.

    Reply
    • malihu
      Posted on January 20, 2011 at 16:56 Permalink

      Hi Paul. This happens cause custom tooltips remove the title attribute (so native browser tooltips are disabled). I’ll check the script asap to see what can be done.

      Reply
    • malihu
      Posted on February 9, 2011 at 17:23 Permalink

      Hi again Paul,
      I’ve updated the script to add back the title attribute on click. Post, demo and download archive are updated 😉

      Reply
      • Paul
        Posted on February 19, 2011 at 00:05 Permalink

        Hi Malihu,
        New version works great.
        Thanks!
        Paul

        Reply
  17. Budownictwo
    Posted on January 8, 2011 at 01:38 Permalink

    Very nice tutorial 🙂

    Reply
  18. Jenny
    Posted on December 27, 2010 at 20:30 Permalink

    This is working great for me, except I would like the tooltip to show up in a fixed position relative to the thing I am hovering over – i.e., not dependent on where my cursor is. So it should always perhaps show up centered and immediately above the photo I am mousing over. I am not sure how to edit the js or the css to make this happen instead of the current functionality. Any ideas?

    Reply
    • malihu
      Posted on December 27, 2010 at 20:44 Permalink

      Hello Jenny,

      Unfortunately it’s not easy to modify this script to work the way you describe, as this plugin is based entirely on the functionality of native browser tooltips. If I get some time I might develop such a tooltip and let you know.

      Reply
  19. El
    Posted on December 13, 2010 at 12:33 Permalink

    Great.
    Simple and useful

    Reply
  20. Esteban Suarez
    Posted on November 27, 2010 at 21:54 Permalink

    Very nice!

    Reply
  21. Jim
    Posted on November 12, 2010 at 23:31 Permalink

    That was supposed to say:

    Does this plugin work if I’m including jquery.js and your plugin js file before the end BODY tag rather than in the HEAD section?

    Reply
    • malihu
      Posted on November 14, 2010 at 19:21 Permalink

      Yeap 🙂

      Reply
  22. Jim
    Posted on November 12, 2010 at 23:29 Permalink

    Does this plugin work if I’m including jquery.js and your plugin js file before the end tag rather than in the section?

    Reply
  23. gabriel
    Posted on November 5, 2010 at 18:37 Permalink

    gracias

    Reply
    • Jen
      Posted on November 10, 2010 at 01:57 Permalink

      I am getting a message that I have a syntax error with the following line of code:

      05 $().ready(function() {

      I am not sure why it ads numbers to my code, but it does.

      I am kind of new to this so please be kind. I put both .js file and .css file in my main directory. Then I copied the code and put inside the head tag. Does it need to go somewhere specific in the head tag? I don’t understand why this is not working. Thank you

      Reply
      • malihu
        Posted on November 10, 2010 at 09:59 Permalink

        Is this line number? Can you post a link to your code so I can check it?

        Reply
      • Kristoffer
        Posted on November 12, 2010 at 14:10 Permalink

        You have copied the code from this page, therefor got line numbers in your code. Remove all line numbers from your code or download the files instead of copying the code.

        Reply
  24. Berik
    Posted on November 1, 2010 at 08:45 Permalink

    So Interesting article.

    Reply
    • Eyal
      Posted on August 2, 2011 at 14:09 Permalink

      Hi Manos,

      Thanks for the cool plugin. I bought you a coffee 😉

      A minor issue I encountered and fixed:
      If you have two elements with tooltip one next to the other, and you hover slowly over one and directly into the other (while the first tooltip is fading-in), the second tooltip won’t show at all.
      Reason: the fade-in callback of the first tooltip kills the second tooltip’s delay timer.
      My fix: clear the timer before the animation:
      function smtTip_fadeIn(){
      clearInterval(smtTip_delay);
      smtTip.fadeTo(“fast”,1);
      }

      Reply
  25. avery
    Posted on October 22, 2010 at 21:06 Permalink

    hi, i like this, but i am wondering if i can put link inside the box and make it stay a while so the content in the box can be copied, and most importantly, is it cross browser?

    thanks

    Reply
    • malihu
      Posted on October 24, 2010 at 04:26 Permalink

      As it is, you cannot put anchor tags inside it, cause the tooltip simply displays the title attribute of an element. I’ve check the script on Opera, Chrome, Safari, Firefox and IE and works as expected, so it is cross-browser.

      Reply
  26. Kian Ann
    Posted on October 11, 2010 at 03:43 Permalink

    Nice and simple addon to really improve the usability of websites!

    Reply
  27. galeazzo
    Posted on October 5, 2010 at 18:36 Permalink

    Thanks a lot . Great job as usual.
    Greeting from France

    Reply
  28. Manos
    Posted on October 5, 2010 at 15:22 Permalink

    Bravo Mano! poly kalh doulia.. well done!

    Reply
    • malihu
      Posted on October 5, 2010 at 15:38 Permalink

      Thank you all! Euxaristw Mano 🙂

      Reply
  29. Javier
    Posted on October 2, 2010 at 18:09 Permalink

    Thanks! for the tool-tip
    I tropicalized

    greetings from Perú

    Reply
  30. fukid
    Posted on September 30, 2010 at 14:16 Permalink

    thanks! simple and nice!

    Reply

Comments pages: 1 2 3

Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php