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. Michael Miranda
    Posted on December 25, 2015 at 23:20 Permalink

    Can you change the name of the CSS style applied to the tooltip? Basically, I want tooltips to display a certain way within one elements, and a different way within another. If it’s not possible, it’s not really a problem, just wanted to see if it would work.

    Reply
  2. Jessica
    Posted on October 9, 2015 at 07:38 Permalink

    I may be overlooking how to do this, but is it possible to customize individual tooltips for various classes?

    Reply
  3. Priyank
    Posted on August 24, 2015 at 10:10 Permalink

    Hi,

    I have a situation where i want to display the content of a DIV in the tooltip of an ANCHOR tag. like the example below

    help
    This is the tooltip content for anchor tag>

    So, when you hover on the “help” anchor tag, i should see the content of tipcontent div as my tooltip.

    How can i do that?

    Reply
    • Priyank
      Posted on August 24, 2015 at 10:12 Permalink

      <a href="#" class="atip">help</a> <div class="tipcontent">This is the tooltip content for anchor tag></div>

      Reply
      • malihu
        Posted on September 11, 2015 at 22:19 Permalink

        You cannot do what you describe with this plugin, as it’s simply styling the browser tooltip which is generated by the element’s title attribute (which cannot contain HTML code).

        Reply
  4. Mary
    Posted on February 10, 2015 at 12:17 Permalink

    Hello!

    I got this code to work perfectly on my Tumblr, thanks. My only question/concern is: how do you add line breaks to this code? I’ve been busting my head for a week now trying to figure this out.

    I’m not too great with HTML, but if someone could explain this to me and tell me where I should put the codes, I’d be extremely thankful.

    Reply
  5. Marc
    Posted on January 22, 2014 at 18:10 Permalink

    I’m having some issues getting this to work. I was wondering if perhaps this doesn’t work with ?

    Reply
  6. Pedro Ferreira
    Posted on January 16, 2014 at 11:43 Permalink

    Just for the record, there’s a bug report, from the very developer owner:
    https://github.com/malihu/jquery-style-my-tooltips/issues/2

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

      It’s a bug related to JQuery version (>1.9).

      You’ll get:
      Type Issue:
      ‘undefined’ is not a function (evaluating ‘$(“.smt-current-element”).live’)
      cause “live’” doesn’t work anymore – needs to be replaced.

      I thought it might be usefull to someone els. Took me ages to found it…
      Cheers!

      Reply
  7. Damian
    Posted on August 23, 2013 at 23:05 Permalink

    Can it be use for commercial purpose ?

    Reply
  8. John
    Posted on June 23, 2013 at 04:39 Permalink

    Is there any way to make this support line breaks?

    Without any script, Firefox will honor line breaks.

    Once I install this, the tooltips are beautifully styled, but the line breaks are gone.

    I am using this on Coppermine 1.5.24.

    Native FF tooltip before install of this script.

    Title=This is the title
    Filename-=This is the filename
    Filesize=250k

    Tooltip after install:

    Title=This is the titleFilename-=This is the filenameFilesize=250k

    Anyway to reinsert the line breaks??

    Thanks!

    Reply
    • John
      Posted on June 23, 2013 at 05:04 Permalink

      Also, wanted to add that the linebreak in the Coppermine code is:

      $LINEBREAK

      Reply
  9. Ameennullah
    Posted on June 16, 2013 at 17:18 Permalink

    Thanks you for this simple clean awesome script.

    I would like to know is there a way to display the tooltip just above the link or div tag centered?

    Reply
  10. martin
    Posted on June 13, 2013 at 12:23 Permalink

    i downloaded the:

    https://raw.github.com/malihu/jquery-style-my-tooltips/master/jquery.style-my-tooltips.js

    and it has a bug or what in line 37:

    Type Issue:
    ‘undefined’ is not a function (evaluating ‘$(“.smt-current-element”).live’)

    line 37 contains: });

    how do i fix that?

    Reply
  11. Cindy
    Posted on May 11, 2013 at 21:11 Permalink

    Hello, i’m new to web desing so my questions is probably really stupid… how do i upload .js and .css to my web server (google chrome)?

    Reply
  12. Austin Gun Trust
    Posted on March 5, 2013 at 13:43 Permalink

    Brilliant tooltip! It looks so simple. This tooltip could be very useful for clean and simple websites.

    Reply
  13. Russell White
    Posted on February 27, 2013 at 03:41 Permalink

    The fix which asaf posted worked for me. I tried at least two other tooltips in a Fancybox enabled Arles-generated gallery and this one beats them hands down.

    Thanks for a great script!

    Reply
  14. Korvoj
    Posted on January 17, 2013 at 22:35 Permalink

    Hello~ I tried using this lovely scrip in my tumblr. theme and it works fine as long as I dont scroll. After scrolling the z-index doesn’t work anymore no matter how large the number. If you have time please help.

    Reply
  15. Rhonda
    Posted on November 17, 2012 at 18:56 Permalink

    I’m working on a Joomla site whose template is using this plugin. I am seeing the following error when I debug in Chrome: Uncaught TypeError: Cannot call method ‘style_my_tooltips’ of null Suggestions?

    Thanks!

    Reply
  16. jvdheuvel
    Posted on September 29, 2012 at 10:56 Permalink

    I think it’s beautiful. I use it on my site. However when I started using it my Slick Social Share Button plugin stopped srolling. I switched it of it was a bit too slick for me anyway. Hopefully that is the only plugin that doesn’t like the tooltips plugin.

    http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-slick-social-share-buttons/

    Reply
  17. WG Kirschner
    Posted on August 19, 2012 at 19:24 Permalink

    hello malihu,
    It is some time ago since I tried your tooltip – old version (post-nr: 25) – opportunity! was at that time not possible! now I’ve found you’ve installed time-delay and z-index – very good – and I want to try your tooltip happy again. But have a question: would like to use on my site multiple tooltips (with hover), the tooltips are in DIV TAGS. Is this possible or how I do it, it works. Title I do not want to use, can be used also a backgrond-image instead of title? Excuse me if you like my. Ask anything unusual happen, but I’m not a jQuery expert and only superficially familiar with javascript.

    thanks WG Kirschner

    Reply
  18. londonfire93
    Posted on July 4, 2012 at 08:18 Permalink

    i really like your plugin but i seem to be running into an issue. the plugin works when item is being hovered but it will not display the text it just shows a tiny box. i cant seem to figure out the problem . can you please help?

    function

    (function($){
    $(document).ready(function(){
    $(“[Tooltip]”).style_my_tooltips();
    tip_follows_cursor:true
    tip_delay_time:700
    tip_fade_speed:300
    });
    })(jQuery);

    fuction being used here

    Reply
  19. Ali
    Posted on July 3, 2012 at 15:34 Permalink

    It’s not working for me why :((( ?

    Reply
  20. Rodrigo
    Posted on June 8, 2012 at 19:05 Permalink

    Hey man, can you check out your script?
    When I put this code in my document works well
    <script> (function($){ $(document).ready(function(){ $("[title]").style_my_tooltips(); }); })(jQuery); </script>

    Now, when I put the alternate code for customize the tooltip, it doesn’t works at all (I’ve tried everithing to make it , but nothing happens, also I’ve tried to change it directly in your demo page, but even there, doesn’t works!!).
    <script> (function($){ $(document).ready(function(){ $(&quot;[title]&quot;).style_my_tooltips({ tip_follows_cursor:true, //boolean tip_delay_time:0, //milliseconds tip_fade_speed:0 //milliseconds }); })(jQuery); </script>

    Please check it out, with the previous script before you actualize it today, I had no problems at all, and now this.
    Sorry if my english is bad, hope for finding a solution and thanks for your time.

    Reply
    • malihu
      Posted on June 8, 2012 at 23:27 Permalink

      You’ve missed closing document ready function. You need an extra }); after style_my_tooltips function closes.
      The code above should be:

      <script> (function($){ $(document).ready(function(){ $("[title]").style_my_tooltips({ tip_follows_cursor:true, //boolean tip_delay_time:0, //milliseconds tip_fade_speed:0 //milliseconds }); }); /* <- this is what's missing */ })(jQuery); </script>

      Reply
      • Rodrigo
        Posted on June 9, 2012 at 02:26 Permalink

        OMG, So true… thanks for the help man! cheers!

        Reply
  21. Ingo
    Posted on April 27, 2012 at 19:08 Permalink

    Hi malihu,

    awesome plugin – short and simple.

    Until now I used the Tooltip Plugin
    Tipsy but it´s over now ;-).

    For better IE integration an for older FF:
    In “style-my-tooltip.css” on line 9:

    display:inline-block; /*important*/

    I changed it into
    display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; /*important* Supported display: inline-block for IE 6-7 and FF < 3, too /


    Thanks for sharing – Great.

    Bye
    Ingo

    Reply
    • malihu
      Posted on April 28, 2012 at 00:28 Permalink

      Awesome! Thank you for your comments and for taking the time to post your css changes 🙂

      Reply
  22. Matthew
    Posted on March 16, 2012 at 01:49 Permalink

    Hi. Great and simple tootltip. After changing the position to absolute all is much better, but I would like to add a little tweek so that the tooltip fades out after a timeout even if the tooltip is still hovering over the object it relates to … if you see what I mean.

    Since if one scrolls whilst hovering on an object, the tooltip also scrolls up or down. Especially with the two finger scroll on a mac trackpad. I don’t know if I am explaining myself very well. It just doesn’t look nice when the tooltip text scrolls with the page when you are still hovering on the object that triggered it…

    Still pretty neat little plugin must say.

    Reply
    • Markus
      Posted on February 14, 2016 at 20:30 Permalink

      Browser tooltips can be a feature that sets a website apart. I know this post has been out there a while. We are web designers in Nashville TN that use your plugin and appreciate it tremendously.

      Reply
    • Deluxe
      Posted on February 15, 2016 at 18:09 Permalink

      We are definitely considering this code for our bus that serves NYC and DC. Is it still supported?

      Reply
  23. κατασκευή ιστοσελίδω
    Posted on March 15, 2012 at 00:39 Permalink

    I am having the same problem as agentmilindu… any ideas that could help?

    Reply
  24. agentmilindu
    Posted on March 12, 2012 at 08:45 Permalink

    Tool-tips seems not changing when title is dynamically changed using jquery attr()
    ,any help? However a great plugin, thanks!

    Reply
    • malihu
      Posted on June 9, 2012 at 00:23 Permalink

      I’ve just updated the plugin to work correctly with dynamically generated content and on-the-fly changing title attributes 😉
      Re-download it and check the updated implementation guides on this post.

      Reply
  25. Roman
    Posted on March 11, 2012 at 10:57 Permalink

    Thanks a lot Mirrorshade. I solved the bug with your solution.
    im using the plugin here: http://vippazintys.lt

    thanks a lot for author!

    Reply
  26. Todd
    Posted on March 9, 2012 at 19:58 Permalink

    of course this stripped out a lot of code.

    <link href="/style-my-tooltips.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/jquery.style-my-tooltips.js"> $().ready(function() { //applies to all elements with title attribute. Change to ".class[title]" to select only elements with specific .class and title $(".mainnav[title]").style_my_tooltips({ tip_follows_cursor: "on", //on/off tip_delay_time: 1000 //milliseconds }); });

    Reply
    • Todd
      Posted on March 9, 2012 at 20:39 Permalink

      Never mind. I added code to footer just after wp_footer and it works great! Thanks for a nice script.

      Reply
  27. Todd
    Posted on March 9, 2012 at 19:56 Permalink

    I’m trying to put this in my header.php for a WordPress site and I can’t get it to work. Here’s the code in my header file. This is meant to be applied to the Main Nav links(.mainnav) in the same file.

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

    <script type="text/javascript" src="/jquery.style-my-tooltips.js”>

    $().ready(function() {
    //applies to all elements with title attribute. Change to “.class[title]” to select only elements with specific .class and title
    $(“.mainnav[title]”).style_my_tooltips({
    tip_follows_cursor: “on”, //on/off
    tip_delay_time: 1000 //milliseconds
    });
    });

    Reply
  28. Linda
    Posted on December 19, 2011 at 03:36 Permalink

    I have the same issue as JP. It works fine if you don’t scroll at all. But if you scroll even the slightest, and hover over the same image, you’ll find the tooltip about 200px+ below the cursor… Anything under the fold seems to have the title text completely removed. As in, they go poof from the code. Rather puzzling.

    The same issue occurs in IE9, Chrome 16.0.912.63 and FF 8.0.1.

    Reply
    • Devatics
      Posted on January 6, 2012 at 16:45 Permalink

      I had the same issue with scrolling. If I scrolled too much, the tooltip did not appear.

      Here is the fix I made :
      in the jquery.style-my-tooltips.js file look around line 23 for if(leftOffset<=$(window).width()) and replace this block and the following with :

      if(leftOffset <= ($(window).width() + $(window).scrollLeft()) ){
      smtTip.css("left",smtMouseCoordsX+cursor_tip_margin_x-$(window).scrollLeft());
      } else {
      var thePosX=smtMouseCoordsX-(cursor_tip_margin_x)-$(smtTip).width();
      theposX-=$(window).scrollLeft();
      smtTip.css("left",thePosX);
      }
      if(topOffset <= ($(window).height()+$(window).scrollTop()) ){
      smtTip.css("top",smtMouseCoordsY+cursor_tip_margin_y-$(window).scrollTop());
      } else {
      var thePosY=smtMouseCoordsY-(cursor_tip_margin_y)-$(smtTip).height();
      thePosY-=$(window).scrollTop();
      smtTip.css("top",thePosY);
      }

      I tested it on Firefox 8, Chrome 16 and IE8 and it works fine.

      Reply
  29. JP
    Posted on November 11, 2011 at 22:56 Permalink

    correction *height of page above the top of browser is greater than the distance from mouse to bottom of browser*

    Reply
  30. JP
    Posted on November 11, 2011 at 22:53 Permalink

    love these tooltips; thanks for the work!

    found a glitch (and sounds like it’s on my end) but hoping you have seen this before.

    everything works as it should, however, when I scroll a page below the fold, the tooltip is offset by the height of the page above the fold. At a certain point the tooltip is not even visible as the height of page above fold is greater than the distance from mouse to bottom of browser.

    hoping there is a quick fix. thanks!

    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