Tooltips & Popovers

These tooltips and popovers are adapted from the Twitter Bootstrap JS modules. The stylesheets are based on Twitter Bootstrap, with a couple of ImmobilienScout24 extensions.

  1. Dependencies
  2. Tooltips
    1. Markup
    2. Initialization
  3. Popovers
    1. Markup
    2. Initialization

Dependencies

jQuery is required to use tooltips or popovers

The tooltips and popovers are jQuery plugins. If you intend to use them, please make sure that the jQuery library is present.

Tooltips

Tooltips are simple black boxes that appear to the side of an element when it is hovered.

Markup

Attach a tooltip to an element with the data-toggle="tooltip" attribute.

Choose the tooltip position with the data-placement attribute, which can be set to either top, right, bottom, or left.

Tooltips on different sides
<button type="button" class="button"
        data-placement="left" data-toggle="tooltip"
        data-original-title="Tooltip on the left">
    Tooltip on the left
</button>

<button type="button" class="button"
        data-placement="right" data-toggle="tooltip"
        data-original-title="Tooltip on the right">
    Tooltip on the right
</button>

There is a standard icon that you can use for tooltips. Insert it with the tooltip-icon class.

Tooltip with standard icon
<label for="tooltips-markup-demo-3-input">
    Name<span class="tooltip-icon" data-placement="right" data-toggle="tooltip" data-original-title="The thing that people say when they want you to listen."></span>
</label>
<input type="text" id="tooltips-markup-demo-3-input" placeholder="Bozo McSuperfly" class="input-text one-whole" />

Initialization

To initialize a tooltip, call the tooltip method on the respective jQuery elements.

JavaScript to initialize all tooltips in the page
jQuery(function () {
    jQuery('[data-toggle="tooltip"]').tooltip({ container: 'body' });
});

Popovers

Popovers are boxes that will open to a side of an element when the user clicks on or touches the element. They will stay open until the next user interaction outside of the popover.

A popover may optionally have a headline.

Markup

Attach a popover to an element with the data-toggle="popover" attribute.

Choose the popover position with the data-placement attribute, which can be set to either top, right, bottom, or left.

Popovers in different configurations
<button type="button" class="button"
        data-placement="top" data-toggle="popover"
        data-original-title="Popover title"
        data-content="This could be your content, seen by you and downright gazillions of other users of this documentation on a daily basis. Get in touch with us now to find out how to maximize your audience. And probably leverage something, as well, while we're at it.">
    Popover with a title (top)
</button>

<button type="button" class="button"
        data-placement="bottom" data-toggle="popover"
        data-content="Let's keep this short, because who has any time left for a chat anymore, am I right?">
    Popover without a title (bottom)
</button>

Initialization

Initialize popovers with the popoverTrigger method on the jQuery object. This method will take any jQuery selector as parameter.

It is not strictly necessary for any popover triggers to be present in the DOM at the time that the function is called. A listener on the body element will look for any click events on the given selectors and open/close the respective popovers.

JavaScript to initialize popovers
jQuery(function () {
    jQuery.popoverTrigger('[data-toggle="popover"]');
});