Examples

Positioning

  • Top tip.
  • Left tip.
  • Right tip.
  • Bottom tip.

Styles

  • Default tip.
  • Success tip.
  • Error tip.
  • Light tip.
  • Wait for it...

Advanced

  • HTML
  • Selectors
  • Events
  • Click me.

*I came from here.

Usage

Create your tips:

$('.has-tip').frosty();

Pass options to your tips:

$('.has-tip.tip-left').frosty({
  position: 'left'
});

Add/remove classes from your tips:

// A good thing happened.
$('.has-tip').frosty('addClass', 'success');

// A bad thing happened.
$('.has-tip').frosty('removeClass', 'success');
$('.has-tip').frosty('addClass', 'error');  

Manually perform actions on your tips:

$('.has-tip').frosty('show');
$('.has-tip').frosty('hide');
$('.has-tip').frosty('toggle');

API

show

Show the tooltip.

$('.has-tip').frosty('show');

hide

Hide the tooltip.

$('.has-tip').frosty('hide');

toggle

Toggle display of the tooltip.

$('.has-tip').frosty('toggle');

addClass

Add a class to the tooltip.

$('.has-tip').frosty('addClass', 'success');

removeClass

Remove a class from the tooltip.

$('.has-tip').frosty('removeClass', 'success');

Options

Options can be set by passing an object on initialization or by adding attributes to the tooltip element.

attribute (string) defaults to 'title' ex.

Attribute the tip is pulled from.

classes (string) defaults to 'tip' ex.

CSS class(es) applied to the tooltip. Same behavior as the class attribute on an element.

content (string) defaults to '' ex.

Used with 'html': true to directly set the tips content.

delay (integer, object) defaults to 0 ex.

Sets the show/hide delay. Accepts an object for separate values: { show: 500, hide: 200 }

hasArrow (boolean) defaults to true ex.

Adds a has-arrow class to the tip to be handled by CSS.

html (boolean) defaults to false ex.

Set to true before setting the 'content' option

offset (integer) defaults to 10 ex.

Offset in pixels between the anchor element and the tip.

position (string) defaults to 'top' ex.

Anchor position. Accepts 'top', 'bottom', 'left', 'right'.

removeTitle (boolean) defaults to true ex.

Removes the original title from the anchor element.

selector (string) defaults to false ex.

Will render the tip with the HTML of the target element if set.

trigger (string) defaults to 'hover' ex.

Action that triggers the tip. Accepts 'hover', 'click', 'manual', 'focus'.

onHidden (function) defaults to empty function ex.

Function called when the tip is hidden.

onShown (function) defaults to empty function ex.

Function called when the tip is shown.