Sandbox: JavaScript

Examples

Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.

Hover over the links below to see tooltips:

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Four directions

<div class="tooltip-demo">
  <div class="bs-example-tooltips">
    <button type="button" class="btn btn-default" data-behavior="BS.Tooltip" data-bs-tooltip-location="left" title="Tooltip on left">Tooltip on left</button>
    <button type="button" class="btn btn-default" data-behavior="BS.Tooltip" data-bs-tooltip-location="top" title="Tooltip on top">Tooltip on top</button>
    <button type="button" class="btn btn-default" data-behavior="BS.Tooltip" data-bs-tooltip-location="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
    <button type="button" class="btn btn-default" data-behavior="BS.Tooltip" data-bs-tooltip-location="right" title="Tooltip on right">Tooltip on right</button>
  </div>
</div>

Offsets

<div class="tooltip-demo">
  <div class="bs-example-tooltips">
    <button type="button" class="btn btn-default" data-behavior="BS.Tooltip"
      data-bs-tooltip-options="
        'location': 'above',
        'offset': 100
      " title="Tooltip shifted 100 pixels">location: above, offset: 100</button>
    <button type="button" class="btn btn-default" data-behavior="BS.Tooltip"
      data-bs-tooltip-options="
        'location': 'above',
        'offset': -30
      " title="Tooltip shifted -30 pixels">location: above, offset: -30</button>
    <button type="button" class="btn btn-default" data-behavior="BS.Tooltip"
      data-bs-tooltip-options="
        'location': 'above',
        'offset': {'x': -30}
      " title="Tooltip shifted x: -30 pixels">location: above, offset: {x: -30}</button>
    <button type="button" class="btn btn-default" data-behavior="BS.Tooltip"
      data-bs-tooltip-options="
        'location': 'above',
        'offset': {'x': 90, 'y': 10}
      " title="Tooltip shifted x: 90, y: 10 pixels">location: above, offset: {x: 90, y: 10}</button>
  </div>
</div>

Usage

Via data attributes

<a href="#" data-behavior="BS.Tooltip" title="first tooltip">Hover over me</a>

Behavior Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-bs-tooltip-content="".

Name type default description
content string 'title' the content of the tip, if not defined, will use the title property of the element
animate boolean true apply a css fade transition to the tooltip
delayIn number 200 delay before showing tooltip (ms)
delayOut number 0 delay before hiding tooltip (ms)
location string 'above' how to position the tooltip - above | below | left | right
offset number 0 pixel offset of tooltip from target element
trigger string 'hover' how tooltip is triggered - hover | focus | manual
onOverflow boolean false Only show the tip if the element's content is overflown (i.e. it's scroll-height or scroll-width is greater than the height or width of the element)

via JavaScript

new Bootstrap.Tooltip(element, options).show();

Related Documentation

Note: Not all links in these work.

Behavior Filter: Behavior.BS.Tooltip

A behavior filter to instantiate Bootstrap simple tips.

Demo / Fancy Docs

http://anutron.github.com/mootools-bootstrap/#popover

Note

Previously this filter was called "BS.Twipsy"; that name still works for backwards compatibility.

Example

<a data-behavior="BS.Tooltip" title="A Title"
    data-tooltip-options="
        'location':'left',
        'offset': -10
    ">hover for tip</a>

Options

  • content - (string) The content of the popup. If not defined, will attempt to read it from the element's title property.
  • location - (string) The location of the tip: above, below, left, or right. Defaults to above.
  • animate - (boolean) If true the tip will fade in. Defaults to true.
  • delayIn - (number) The time in milliseconds that the tip should delay from showing. Defaults to 200.
  • delayOut - (number) The time in milliseconds that the tip should delay from hiding. Defaults to 0.
  • offset - (number or object) The offset of the tip. If a number, will be used for the y offset for top and bottom located tips, x for left and right located tips. If an object, should contain .y and/or .x numerical values. Defaults to 10.
  • trigger - (string) The event type to attach to the target element to show the tip. Choose from hover, focus, or manual.
  • onOverflow - (boolean) Only show the tip if the element's content is overflown (i.e. it's scroll-height or scroll-width is greater than the height or width of the element). Defaults to false.
  • inject - (object) A set of options for where to inject the DOM element created ({target: 'div.foo', where: 'bottom'}). Defaults to injection into the root of the DOM (inconvenient if your element scrolls or gets hitten by tabs or something.)

Behavior.Filter: Behavior.BS.Tooltip.Static

This variation just shows the tooltip immediately. it's trigger option is set to manual so it doesn't hide on mouseout.

Class: Bootstrap.Tooltip

Creates a simple tool tip that works with Bootstrap.

Implements

Note

Previously this Class was called "Bootstrap.Twipsy"; that name still works for backwards compatibility.

Bootstrap.Tooltip Method: constructor

Syntax

new Bootstrap.Tooltip(element[, options]);

Arguments

  1. element - (mixed) A string of the id for an Element or an Element that is the target of the tip.
  2. options - (object, optional) a key/value object of options

Options

  • location - (string) The location of the tip: above, below, left, or right. Defaults to above.
  • animate - (boolean) If true the tip will fade in. Defaults to true.
  • delayIn - (number) The time in milliseconds that the tip should delay from showing. Defaults to 200.
  • delayOut - (number) The time in milliseconds that the tip should delay from hiding. Defaults to 0.
  • fallback - (string) The tip value if no title value is set on the target element.
  • override - (string) The tip value used instead of the title value of the target element.
  • offset - (number or object) The offset of the tip. If a number, will be used for the y offset for top and bottom located tips, x for left and right located tips. If an object, should contain .y and/or .x numerical values. Defaults to 0.
  • title - (string) The element property to use for the tip value. Defaults to title.
  • trigger - (string) The event type to attach to the target element to show the tip. Choose from hover, focus, click, or 'manual'.
  • onOverflow - (boolean) Only show the tip if the element's content is overflown (i.e. it's scroll-height or scroll-width is greater than the height or width of the element). Defaults to false.
  • getContent - (function) A function that returns the tip value. By default, it retrieves the value of the title option from the target element.
  • inject - (object) Where to inject the tip. Defaults to {target: document.body, where: 'bottom'}.

Events

  • show - (function) The function to apply when the tip element is displayed. Passed the element that is displayed. Note that if a CSS transition is used this is fired when that transition starts.
  • hide - (function) The function to apply when the tip element is hidden. Passed the element that is displayed. Note that if a CSS transition is used this is fired when that transition starts.
  • complete - (function) The function to apply after the CSS transition. Passed true as its argument if the tip is visible, false if hidden.

Bootstrap.Tooltip Method: show

Show the tip.

Syntax

myTip.show();

Returns

Bootstrap.Tooltip Method: hide

Hide the tip.

Syntax

myTip.hide();

Returns

Bootstrap.Tooltip Method: destroy

Destroys the tip element and detaches the event listeners.

Syntax

myTip.destroy();

Returns