Tooltips - Round & Oval

The Round & Oval Tooltips will pop-up to put a smile on your face !

They are ideal especially for the young audience ( kids, teens ), but not only.

Sites that use round shapes will look even cooler with these tooltips…

Features:

• 4 in 1 : Round Bubbles, Oval Bubbles, Round Tooltips, Oval Tooltips
• innovative and unique design
• 8 sizes
• 8 positions
• autopositioning plug-in ( smarTooltip )
• 16 color combinations styles
• 6 bordered styles
• a selection of 13 cool free fonts
• CSS3 transitions
• Font Awesome ready
• modern browsers = just CSS3 + no images + no javascript
• IE 9 = partial CSS3 + no images + jQuery transitions
• IE 8 = images + jQuery
• 4 LESS files included
• minimum markup for maximum CSS
• 4 detailed html documentation files
• support and updates

You can put icons, links, images inside these tooltips.

You can put tooltips on images.

Use them to create surprising and playful designs.

You have maximum control of how text looks and is positioned inside the tooltips. The tooltip’s size does not change automatically depending on how much content you add inside it. Instead, you have to use one of the 8 pre-made size classes to fit your content inside. You can make your own custom size classes with the LESS files.

Also, I DO NOT RECOMMEND them to be used in a CMS. Due to the fact that you have to manually allign the content inside the tooltip, they would not work well with dinamically generated content.

smarTooltip

The smarTooltip is an optional jQuery plug-in that I have made. It is included in this item. These tooltips work perfectly without javascript, but this plug-in takes them to a new level ! The smarTooltipt plug-in has the following features:

• autopositions all or only specific tooltips according to their temporary position on the screen(browser window)
• set position restrictions(exceptions) for each tooltip that uses autopositioning.
• No need to edit any javascript, Everything is done inside the html file. Simply add a css class and a data attribute.

I really like it. Check it out !

Browser compatibility:

• Firefox 16+
• Chrome 23+
• Safari 5.1+
• Opera 12.1
• IE 10
• IE 9 : with jQuery transitions fallback
• IE 8 : with images + jQuery fallback

Copyright

PLEASE buy an EXTENDED LICENSE if:

• you want to include code from this item into a Themeforrest or Codecanyon item

Credits:

• LESS
• jQuery
• Icons: Font Awesome
• Google web fonts authors
• Photographers from everywhere: for the photos of smilling kids

Updates:

18 March:

• added the smarTooltip jQuery plug-in ( see here )

13 March:

• added fallback for IE 9: jQuery transitions
• added fallback for IE 8 : images + jQuery

Comments and rating are much appreciated !

Thanks

Tudor