Tooltip Types

Tooltips can be added to nearly any element with various options.

• Triggers: hover, click, focus, static
• Placement: top, right, bottom, left
• Content: (text string only)
• Color: Same as button colors (see Buttons Docs)

Buttons

Top Bottom Right Left

data-toggle="tooltip" data-trigger="hover" data-placement="top" data-content="Content"

<button type="button" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-content="Content to be found inside tooltip. Lorem Ipsum text tip.">Top</button>

Buttons w/ tip colors

Tip Style: Default Tip Style: Back Tip Style: Cancel Tip Style: Danger Tip Style: Alert Tip Style: Print Tip Style: Download Submit

Click to Show

Click to show tip

Inputs with Focus

Field Title

Inputs with Persistent Tip

Field Title