Learn and share. The simplest harmony.

 

Sweet Tooltip a jQuery & CSS3 Tooltips

Posted on March 1, 2012 and got 30 shouts so far

Sweet Tooltip is a jQuery & CSS3-based tooltip, not merely a one-style tooltip but seven. This imageless tooltips are crafted using CSS power, linear-gradient, box-shadow, text-shadow, :after and :before selector, etc. I created this tooltip with aim for having a style-independent tooltip, so, for future usage I can pick or create a suitable-style tooltip with the project I’m working on, please enjoy!

Seven Styles

There are seven styles currently available in this package : Sweet Strong, Mini Slick, Big Grey, Nightly, Shiny Red, Soft Blue and Big Yellow. All style are inspired by dribbble’s posts. The preview can be seen on the demo page, or here is the screenshot :


Usage

To use this package you can use with following code :

	
	
	
	
	
			Your text
	
	
	
	
	
	

data-style-tooltip : is an HTML5 attribute, at this context containing style name.

data-text-tooltip : is an HTML5 attribute, at this context containing tooltip’s text that you want to display.

Since I’m using :after and :before CSS selector to add more element for the tooltip, any element can be attached for tooltip but non-container element like input or image.

The Code

The JavaScript is binding mouseover and mouseout event on each tooltip link, when mouseover event is fire the code will grab data-text-tooltip’s value for tooltip text and data-style-tooltip’s value for tooltip style, check tooltip link’s position then generate the tooltip containing these attribute. While mouseout will hide and remove the tooltip.

	$('.sweet-tooltip').bind('mouseover', function() {
		
		tooltip				= $(this);
		tooltipText 		= tooltip.attr('data-text-tooltip');
		tooltipClassName	= tooltip.attr('data-style-tooltip');
		tooltipClass		= '.' + tooltipClassName;
		
		if(tooltip.hasClass('showed-tooltip')) return false;
		
		tooltip.addClass('showed-tooltip')
				 .after('
'+tooltipText+'
'); tooltipPosTop = tooltip.position().top - $(tooltipClass).outerHeight() - 10; tooltipPosLeft = tooltip.position().left; tooltipPosLeft = tooltipPosLeft - (($(tooltipClass).outerWidth()/2) - tooltip.outerWidth()/2); $(tooltipClass).css({ 'left': tooltipPosLeft, 'top': tooltipPosTop }) .animate({'opacity':'1', 'marginTop':'0'}, 500); }).bind('mouseout', function() { $(tooltipClass).animate({'opacity':'0', 'marginTop':'-10px'}, 500, function() { $(this).remove(); tooltip.removeClass('showed-tooltip'); }); });


Enjoy

Currently only seven style available but adding more style is possible, by adding class on sweet-tooltip.css. That’s it, please enjoy and share your toughts!.

 

This Post Tags :

Bookmark Post :

Pin It
  • Great stuff, except there are some issues with the demo page. Stop the mouse pointer over some anchors and the tooltip appears and then disappears without ample time to read it. It seems to work after a few attempts. And I’m not sure if it’s a related issue, but then some of the other tooltips won’t work at all until I reload the page (Firefox 10.0.2 on Windows 7).

    Buggy demo aside, nice work.

    • It seems the bug appear when the tooltip appear over the anchors and make mouseout event on it.
      I still try to catch the bug anyway thanks for noticing and make a comment Mike! ;)

      • The bug’s still there :|

  • nice, tks 4 share !!!!

  • Very nice CSS tooltips!

  • Thanks for the tool tip mate..

  • Nice tooltip! This is exactly what i was looking for!

  • Very nice

  • How to do it with an input?

    • Non-container element like input and image won’t work since i’m using pseudo-element for creating tooltip. If you want to, create the tooltip by adding more element.

  • It seems there are problems with Internet Explorer 9.

  • Hi there Hidayat. Thank you for sharing this tutorial with us. I have a question, which hopefully is not too complicated to answer. I’m trying to use your tooltip on a page I’m building (I’m not a web designer by the way) and it works perfectly. The issue I’m having is when I use the code within an accordion jquery on a text. The tooltip loads but all the way to the bottom of the space where the text is, out of sight. I scroll down quick enough to see the tooltip fading away. Do you know if I need to modify anything or is it impossible to use this code within an accordion?

    • Hi Yass!
      It’s hard to checkout your case since there’s no url, could you please give me your url to check?

      Meanwhile, in your text if there’s no an anchor that wrap it, you can put the span element on it, for example :

      <span
      class="sweet-tooltip" 
      data-style-tooltip="style name" 
      data-text-tooltip="text"
      >your text</span>
      

      If there’s an anchor, add this style to your current anchor :

      <a class="sweet-tooltip" 
      data-style-tooltip="style name" 
      data-text-tooltip="text" 
      style="position:relative">
      your text</a>
      

      Let me know how it works.

      • I wrote the URL on the website box, hopefully it will come out.

        I tried what you posted and it works perfectly outside the accordion, but I’m still getting the same behavior inside.

        • The problem is on tooltip top position, before showing it reads current text position relative to the document that’s why it positioned far away from the text.

          I’ve changed the code to make it relative to the parent, you can redownload the plugin and replace with your current plugin. http://www.webstuffshare.com/download/SweetTooltip.zip

  • I replaced the files with the old ones and still the same. But don’t worry my friend, I don’t want to be bothering you with this stuff. I do appreciate your time and the response.

    • I’ve checked again on your url, it seems the sweet-tooltip.js still not changed, please change to the new one so I can check out the problem.

      • I tried replacing the files, and even deleting them from the folder, and moving the new ones provided on your last link but still the same results. I replaced the css, and the two js files by the way.

        • It should be working by only replacing sweet-tooltip.js, sent you an email for my working code from your sample.

      • Hi, nice tootip.
        But i have a question, how do I use your tool on data generated dynamically via json.

        $(“.tooptipo”).trigger(“????”);

        • Did you mean after json data received the tooltip will pop-out automatically? Try this :

          //for pop-out trigger
          $('.sweet-tooltip').mouseover();
          //for dissapear trigger 
          $('.sweet-tooltip').mouseout(); 
          
  • You my friend, totally rock! Whatever you fixed, worked like a charm. Thank you so much for taking your time to help me out.

  • MashaAllah, I tought this is a someone’s site from abroad. I thought the name Hidayat Sagita on the comments block were visitors as me. ahahhaha!! U’re site Rock, Brother!
    Glad to know this site, really.

    it’s really a sweet tooltip actually. btw, Bro.. is there any character limitation we could put in it and could we put text link or table inside the tooltip??

    • Thank you (-:

      Both of them is working and no limitations since it is using data-* attributes, you can also put images.

  • Amazing tutorial,thanks for sharing..

  • Hi there,

    Awesome tooltip! But i have a question. Is it possible to let show the tooltip left or right or in in the bottom ? Now is only at the top?

    Maybe give a class name and check it of the class name available. Or check it with jquery of the tooltip out of browser screen and give them right position. Right, Left, Top or Bottom.

    • Hi Kocak,

      Yes, currently it only supports top position.

  • Very nice Hidayat. Always happy to know somebody from Indonesia can produce an international quality product. Keep up the good work.

  • Great tooltips.. I always using tooltips from bootstrap twitter :D I will try this tooltips.. Thanks

  • fantastic work ! , but this cloud too fast dissapearing