Components

Tooltip

Add contextual information to any element.

This page shows some example usage of the <BsTooltip> component. For the full documentation please refer to the API Docs. You might also want to consult the official Bootstrap Docs for general information. 
<BsButton class="mb-1">
  Tooltip on left
  <BsTooltip @placement="left">Tooltip on left</BsTooltip>
</BsButton>
<BsButton class="mb-1">
  Tooltip on top
  <BsTooltip @placement="top">Tooltip on top</BsTooltip>
</BsButton>
<BsButton class="mb-1">
  Tooltip on bottom
  <BsTooltip @placement="bottom">Tooltip on bottom</BsTooltip>
</BsButton>
<BsButton class="mb-1">
  Tooltip on right
  <BsTooltip @placement="right">Tooltip on right</BsTooltip>
</BsButton>
<BsButton class="mb-1">
  Click tooltip
  <BsTooltip @triggerEvents="click">Click tooltip</BsTooltip>
</BsButton>

Tooltip trigger

By default the tooltip will attach itself to the parent DOM element, but there are ways to customize this: 

<button type="button" class="btn btn-secondary">
  DOM parent
  <BsTooltip @title="DOM parent" />
</button>
<button type="button" id="Tooltip-button" class="btn btn-secondary">
  CSS selector
</button>
<BsTooltip @triggerElement="#Tooltip-button" @title="CSS selector" />