Tooltips

Using Blueprint/Bootstrap tooltips is deprecated. Use the React component `` instead.

Modes

Mode classes tooltip-focus and tooltip-toggle are applied to the container. Hover is the default mode. It can be disabled with the tooltip-no-hover class.

Tooltips with tooltip-toggle are shown by applying the tooltip-toggle-show class.

An inline tooltip can be used by just using the tooltip class without a container.

Hover to show tooltip Lorem ipsum dolor sit amet

<span class="tooltip_container">
    <a href="#">Hover to show tooltip</a>
    <span class="tooltip"> Lorem ipsum dolor sit amet </span>
</span>

<div class="tooltip_container tooltip-focus tooltip-no-hover">
    <input type="text" placeholder="Focus to show tooltip" />
    <span class="tooltip"> Lorem ipsum dolor sit amet </span>
</div>

<div
    class="tooltip_container tooltip-toggle tooltip-toggle-show tooltip-no-hover">
    <button class="btn btn-primary btn-primary">Tooltip toggled on</button>
    <span class="tooltip"> Lorem ipsum dolor sit amet </span>
</div>

<div class="tooltip">Inline tooltip</div>

Positions

Default tooltips are shown to the south.

Apply one of the classes tooltip-north, tooltip-east, tooltip-west, tooltip-southwest or tooltip-southeast to the tooltip element.

<div class="tooltip_container d-inline-block">
    <button class="btn btn-primary">East</button>
    <span class="tooltip tooltip-east tooltip-sm">
        Lorem ipsum dolor sit amet
    </span>
</div>

<div class="tooltip_container d-inline-block">
    <button class="btn btn-primary">West</button>
    <span class="tooltip tooltip-west tooltip-sm">
        Lorem ipsum dolor sit amet
    </span>
</div>

<div class="tooltip_container d-inline-block">
    <button class="btn btn-primary">Southwest</button>
    <span class="tooltip tooltip-southwest tooltip-sm">
        Lorem ipsum dolor sit amet
    </span>
</div>

<div class="tooltip_container d-inline-block">
    <button class="btn btn-primary">Southeast</button>
    <span class="tooltip tooltip-southeast tooltip-sm">
        Lorem ipsum dolor sit amet
    </span>
</div>

Colors

Default color is black.

Apply one of the classes tooltip-info, tooltip-success, tooltip-danger to the tooltip element.

<div class="tooltip_container d-inline-block">
    <button class="btn btn-primary">Success</button>
    <span class="tooltip tooltip-success">
        Lorem ipsum dolor sit amet
    </span>
</div>

<div class="tooltip_container d-inline-block">
    <button class="btn btn-primary">Danger</button>
    <span class="tooltip tooltip-danger">
        Lorem ipsum dolor sit amet
    </span>
</div>

Sizes

Apply one of the classes tooltip-sm or tooltip-lg to the tooltip element.

Add a container inside the tooltip with the class tooltip_html.

Inside the container, tooltip_content holds the main content.

An icon on the left should have the tooltip_icon class and a close icon should have a tooltip_close-iconclass.

<div class="tooltip_container tooltip-toggle">
    <button class="btn btn-primary">Show tooltip</button>
    <div class="tooltip tooltip-lg">
        <div class="tooltip_html">
            <Icon class="tooltip_icon icon" />
            <span class="tooltip_content">
                <strong>Lorem ipsum</strong> dolor <em>sit amet</em>, partem
                oporteat quaerendum no mea, in sed tota erat vituperatoribus,
                oblique deleniti interesset ne nam. In pro simul voluptaria. Mea
                possit molestiae euripidis ea, no rebum reformidans sit, pri te
                soluta mediocrem. Eu nonumes inciderint pri, eos et maiorum
                placerat.
            </span>
            <CloseIcon class="tooltip_close-icon icon" />
        </div>
    </div>
</div>

Base

Components

Forms

Graphics

Layout

Lists

Typography

Utilities

Tradera Visual Language