Sandbox: JavaScript

Examples

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

Static popover

Four options are available: top, right, bottom, and left aligned.

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Live demo

<div class="bs-example" style="padding-bottom: 24px;">
  <a class="btn btn-lg btn-danger" data-behavior="BS.Popover" title="A Title" data-bs-popover-options="
    'content': 'And here\'s some amazing content. It\'s very engaging. right?',
    'location': 'below'
  ">Mouseover to toggle popover</a>

  <a class="btn btn-lg btn-danger" data-behavior="BS.Popover" title="A Title" data-bs-popover-options="
    'content': 'And here\'s some amazing content. It\'s very engaging. right?',
    'trigger': 'click'
  ">Click to toggle popover</a>
</div>

Four directions

<div class="bs-example-tooltips">
  <button type="button" class="btn btn-default" data-container="body" data-behavior="BS.Popover"
    data-bs-popover-options="
      'location': 'left',
      'content': 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
      'trigger': 'click'
    ">
    Popover on left
  </button>
  <button type="button" class="btn btn-default" data-container="body" data-behavior="BS.Popover"
    data-bs-popover-options="
      'location': 'top',
      'content': 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
      'trigger': 'click'
    ">
    Popover on top
  </button>
  <button type="button" class="btn btn-default" data-container="body" data-behavior="BS.Popover"
    data-bs-popover-options="
      'location': 'bottom',
      'content': 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
      'trigger': 'click'
    ">
    Popover on bottom
  </button>
  <button type="button" class="btn btn-default" data-container="body" data-behavior="BS.Popover"
    data-bs-popover-options="
      'location': 'right',
      'content': 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
      'trigger': 'click'
    ">
    Popover on right
  </button>
</div>

Behavior Options

Name type default description
title string -- the title of the popover, if not defined, will use the title property of the element
content string -- the content of the popover
titleElement string -- A css selector relative to the behavior element that should be used for the title of the popup.
contentElement string -- A css selector relative to the behavior element that should be used for the content of the popup.
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 10 pixel offset of tooltip from target element
trigger string 'hover' how tooltip is triggered - hover | focus | click | 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)

JavaScript

Enable popovers via JavaScript:

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

Related Documentation

Note: Not all links in these work.

Behavior Filter: Behavior.BS.Popover

A behavior filter to instantiate Bootstrap popovers.

Demo / Fancy Docs

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

Example

<a data-behavior="BS.Popover" title="A Title"
    data-popover-content="And here's some amazing content. It's very engaging. right?">
    hover for popover</a>

Options

  • title - (string) The title of the popup. If not defined, will attempt to read it from the element's title property.
  • cloneTitle - (string) Selector, relative to the target element, for the element to be used for the title of the popover.
  • content - (string) The content of the popover.
  • cloneContent - (string) Selector, relative to the target element, for the element to be used for the content of the popover.
  • 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.
  • cssClass - (string) Optional css class to add to the popup.
  • arrowClass - (string) Optional css class to add to the popup arrow element.
  • closeOnClickOut - (boolean) if true, hides the tip when the user clicks anywhere that isn't the tip (only useful if you aren't using hover for the trigger)

Class: Bootstrap.Popover

Creates a large tool tip that works with Bootstrap.

Extends

Bootstrap.Popover Method: constructor

Syntax

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

Arguments

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

Options

  • all the options available for Bootstrap.Tooltip plus:
  • location - (string) same as for Bootstrap.Tooltip except defaults to right.
  • offset - (object or number) same as for Bootstrap.Tooltip except defaults to 10.
  • getContent - (function) A function that returns the tip content. By default, it retrieves the value of the content option from the target element.
  • getTitle - (function) A function that returns the tip title. By default, it retrieves the value of the title option from the target element.
  • content - (string) The element property to use for the tip value. Defaults to data-content.
  • cssClass - (string) Optional css class to add to the popup.
  • arrowClass - (string) Optional css class to add to the popup arrow element.
  • closeOnClickOut - (boolean) if true, hides the tip when the user clicks anywhere that isn't the tip (only useful if you aren't using hover for the trigger)

Events

Methods