WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
CSS / Miscellaneous

Tooltips - Round & Oval

— Add-On to WorldWideScripts.net

Subscribe to our feed to stay up to date!

New! Follow us as you want it!


Tooltips - Round & Oval - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

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


Download
Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers

Properties

Created:
8 March 13

Last Update:
18 March 13

Compatible Browsers:
IE8, IE9, IE10, Firefox, Safari, Opera, Chrome

Files Included:
JavaScript JS, HTML, CSS, LESS

Software Version:
CSS3

Keywords

eCommerce, eCommerce, All Items, bubbles, circle, css3, fallback, innovative, jquery, notification, oval, round, smart, tips, tooltip, tooltips, transitions