Simply Awesome jQuery & CSS3 Tooltip Collection

SweetTooltip is a nice set of tooltips built with jQuery and CSS3, yes it’s no image.

jquery style title tooltip, jquery tooltip examples, custom tooltip in jquery, simple jquery tooltip with image, jquery tooltip add class, tooltip using jquery

Style Available

There are seven tooltip styles available :

Sweet Strong, tooltip style name: tooltip-sweet-strong
Mini Slick, tooltip style name: tooltip-mini-slick
Big Grey, tooltip style name: tooltip-big-grey
Nightly, tooltip style name: tooltip-nightly
Shiny Red, tooltip style name: tooltip-shiny-red
Soft Blue, tooltip style name: tooltip-soft-blue
Big Yellow, tooltip style name: tooltip-big-yellow

jQuery Plugin That Shows Tooltips Of Glossary Terms From A JSON Feed | KOglossaryLinks

1. Load sweet-tooltip.css for default tooltip styles.

<link rel="stylesheet" href="sweet-tooltip.css">

2. Load sweet-tooltip.js after loading the jQuery library.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="sweet-tooltip.js"></script>

3. Add CSS class “sweet-tooltip” to the target elements and use data-* attributes to define content and styles for your tooltips.

<a href="#" class="sweet-tooltip" 
   data-style-tooltip="tooltip-sweet-strong" 
   data-text-tooltip="I'm a tooltip">
   Hove me
</a>

4. Built-in features:

data-style-tooltip="tooltip-sweet-strong"
data-style-tooltip="tooltip-mini-slick"
data-style-tooltip="tooltip-big-grey"
data-style-tooltip="tooltip-nightly"
data-style-tooltip="tooltip-shiny-red"
data-style-tooltip="tooltip-soft-blue"
data-style-tooltip="tooltip-big-yellow"

Animated jQuery/CSS3/HTML5 Tooltip, SweetTooltip Plugin/Github