Robust Configuable Tooltip Popup Plugin For jQuery

File Size: 24.7 KB
Views Total: 695
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Robust Configuable Tooltip Popup Plugin For jQuery

A robust and highly customizable jQuery tooltip plugin that creates an absolute positioned tooltip-style popup based on the element that toggles it (hide/show). All events are processed through the element that toggles the tooltip. Licensed under the GNU GENERAL PUBLIC LICENSE Version 3.

How to use it:

1. Include the jQuery plugin's files and other required resources on the webpage.

<link rel="stylesheet" href="css/style.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/index.js"></script>

2. The fastest way to implement the tooltip plugin is to use title and HTML5 data attributes directly on the target element like this:

<button type="button" 
        data-toggle="tooltip" 
        title="A really simple tooltip!" 
        data-trigger="hover">
        Simple Tooltip
</button>

3. You can also implement the plugin in the JavaScript like this:

$("[data-toggle='tooltip']").tooltip({
  content : 'Tooltip content here'
});

4. All configuration options which can be passed via both JavaScript and HTML5 data attribute.

  • classes: 'tooltip' - A space delimited list of classes to apply to the tooltip container.
  • content: null - {String | $(.selector)} Specifies the HTML to use inside the tooltip container.
  • persistent: false - {Boolean} Specifies if the tooltip should hide when the opposite trigger is fired, a user clicks outside of the tooltip or when another tooltip is shown. If the trigger is hover (mouseover), the tooltip will automatically hide when the mouseout event is fired. If the trigger is focus, the tooltip will automatically hide when the blur event is fired. If the trigger is click, the tooltip will automatically hide when the caller element is clicked again.
  • plainText: false - Whether to treat the [content] as plain text instead of HTML.
  • position: 'top-center' - here to position the tooltip: top-left  | top-center | top-right | bottom-left | bottom-center | bottom-right | left-top | left-middle | left-bottom | right-top  | right-middle | right-bottom. Prefixing any position value with auto (auto-left-middle) will dynamically position the tooltip. In cases where the tooltip will display off screen, the tooltip will be positioned in a position that allows it to be seen.
  • target: 'body' - Appends the tooltip to a specific element.
  • trigger: 'hover' - Event that will display the tooltip: click | focus | hover/mouseover | manual. If the trigger is manual you will have to toggle the tooltip using one of the available methods.
$("[data-toggle='tooltip']").tooltip({
  content : 'Tooltip content here'
});

5. API methods.

  • $.fn.tooltip('get', 'property'): Gets the specified configuration property.
  • $.fn.tooltip('hide'): Hides the tooltip. Triggers the tooltip:hide event. Alias: 'close'.
  • $.fn.tooltip('redraw'): Redraws the tooltip. Triggers the tooltip:redraw event.
  • $.fn.tooltip('set', 'property', [value], silent): Sets the specified configuration property.
  • $.fn.tooltip('show'): Shows the tooltip. Triggers the tooltip:show event. Alias: 'open'.
  • $.fn.tooltip('toggle'): Hides or Shows the tooltip. Triggers the tooltip:toggle event.

6. Events.

  • tooltip:before.hide: Triggered before the tooltip is hidden.
  • tooltip:before.show: Triggered before the tooltip is shown.
  • tooltip:before.toggle: Triggered before the tooltip is toggled.
  • tooltip:before.update: Triggered before the tooltip configuration has been updated.
  • tooltip:hide: Triggered when the tooltip is hidden.
  • tooltip:initialized: Triggered after the tooltip has been intialized.
  • tooltip:show: Triggered when the tooltip is shown.
  • tooltip:toggle: Triggered when the tooltip is toggled.
  • tooltip:update: Triggered when the tooltip configuration has been updated.
  • tooltip:after.hide: Triggered after the tooltip is hidden.
  • tooltip:after.show: Triggered after the tooltip is shown.
  • tooltip:after.toggle: Triggered after the tooltip is toggled.
  • tooltip:after.update: Triggered after the tooltip configuration has been updated.

This awesome jQuery plugin is developed by camdagr8. For more Advanced Usages, please check the demo page or visit the official website.