Tooltips & Popovers

HTML
Pug

<!-- Tooltips Static Examples -->
<div class="example-tooltip">

  <!-- Tooltip Static (On the Top) -->
  <div class="tooltip bs-tooltip-top" role="tooltip">
    <div class="arrow"></div>
    <div class="tooltip-inner">Tooltip on the top</div>
  </div>

  <!-- Tooltip Static (On the Right) -->
  <div class="tooltip bs-tooltip-right" role="tooltip">
    <div class="arrow"></div>
    <div class="tooltip-inner">Tooltip on the right</div>
  </div>

  <!-- Tooltip Static (On the Bottom) -->
  <div class="tooltip bs-tooltip-bottom" role="tooltip">
    <div class="arrow"></div>
    <div class="tooltip-inner">Tooltip on the bottom</div>
  </div>

  <!-- Tooltip Static (On the Left) -->
  <div class="tooltip bs-tooltip-left" role="tooltip">
    <div class="arrow"></div>
    <div class="tooltip-inner">Tooltip on the left</div>
  </div>

  <!-- Tooltip Static (with HTML) -->
  <div class="tooltip bs-tooltip-top" role="tooltip">
    <div class="arrow"></div>
    <div class="tooltip-inner"><i>Tooltip</i> <u>with</u> <strong>HTML</strong></div>
  </div>
</div>

//- Tooltips Static Examples
.example-tooltip

  //- Tooltip Static (On the Top)
  .tooltip.bs-tooltip-top(role="tooltip")
    .arrow
    .tooltip-inner Tooltip on the top
  
  //- Tooltip Static (On the Right)
  .tooltip.bs-tooltip-right(role="tooltip")
    .arrow
    .tooltip-inner Tooltip on the right

  //- Tooltip Static (On the Bottom)
  .tooltip.bs-tooltip-bottom(role="tooltip")
    .arrow
    .tooltip-inner Tooltip on the bottom

  //- Tooltip Static (On the Left)
  .tooltip.bs-tooltip-left(role="tooltip")
    .arrow
    .tooltip-inner Tooltip on the left

  //- Tooltip Static (with HTML)
  .tooltip.bs-tooltip-top(role="tooltip")
    .arrow
    .tooltip-inner <i>Tooltip</i> <u>with</u> <strong>HTML</strong>

HTML
Pug

<!-- Tooltip Demo (On the Top) -->
<button class="btn btn-secondary" type="button" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<!-- Tooltip Demo (On the Right) -->
<button class="btn btn-secondary" type="button" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

<!-- Tooltip Demo (On the Bottom) -->
<button class="btn btn-secondary" type="button" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<!-- Tooltip Demo (On the Left) -->
<button class="btn btn-secondary" type="button" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<!-- Tooltip Demo (with HTML) -->
<button class="btn btn-secondary" type="button" data-toggle="tooltip" data-placement="top" data-html="true" title="<i>Tooltip</i> <u>with</u> <strong>HTML</strong>">Tooltip with HTML</button>

//- Tooltip Demo (On the Top)
button(type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top") Tooltip on top

//- Tooltip Demo (On the Right)
button(type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right") Tooltip on right

//- Tooltip Demo (On the Bottom)
button(type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom") Tooltip on bottom

//- Tooltip Demo (On the Left)
button(type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left") Tooltip on left

//- Tooltip Demo (with HTML)
button(type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" data-html="true" title='<i>Tooltip</i> <u>with</u> <strong>HTML</strong>') Tooltip with HTML

HTML
Pug

<!-- Popovers Static Examples -->
<div class="example-popover clearfix">

  <!-- Popover Static (On the Top) -->
  <div class="popover bs-popover-top bs-popover-top-demo">
    <div class="arrow"></div>
    <h3 class="popover-header">Popover top</h3>
    <div class="popover-body">
      <p>Sed posuere consectetur est at lobortis...</p>
    </div>
  </div>

  <!-- Popover Static (On the Right) -->
  <div class="popover bs-popover-right bs-popover-right-demo">
    <div class="arrow"></div>
    <h3 class="popover-header">Popover right</h3>
    <div class="popover-body">
      <p>Sed posuere consectetur est at lobortis...</p>
    </div>
  </div>

  <!-- Popover Static (On the Bottom) -->
  <div class="popover bs-popover-bottom bs-popover-bottom-demo">
    <div class="arrow"></div>
    <h3 class="popover-header">Popover bottom</h3>
    <div class="popover-body">
      <p>Sed posuere consectetur est at lobortis...</p>
    </div>
  </div>

  <!-- Popover Static (On the Left) -->
  <div class="popover bs-popover-left bs-popover-left-demo">
    <div class="arrow"></div>
    <h3 class="popover-header">Popover left</h3>
    <div class="popover-body">
      <p>Sed posuere consectetur est at lobortis...</p>
    </div>
  </div>
</div>

//- Popovers Static Examples
.example-popover.clearfix

  //- Popover Static (On the Top)
  .popover.bs-popover-top.bs-popover-top-demo
    .arrow
    h3.popover-header Popover top
    .popover-body
      p Sed posuere consectetur est at lobortis...

  //- Popover Static (On the Right)
  .popover.bs-popover-right.bs-popover-right-demo
    .arrow
    h3.popover-header Popover right
    .popover-body
      p Sed posuere consectetur est at lobortis...

  //- Popover Static (On the Bottom)
  .popover.bs-popover-bottom.bs-popover-bottom-demo
    .arrow
    h3.popover-header Popover bottom
    .popover-body
      p Sed posuere consectetur est at lobortis...

  //- Popover Static (On the Left)
  .popover.bs-popover-left.bs-popover-left-demo
    .arrow
    h3.popover-header Popover left
    .popover-body
      p Sed posuere consectetur est at lobortis...

HTML
Pug

<!-- Popover Demo (On the Top) -->
<button class="btn btn-secondary" type="button" data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" title="Popover on top" data-content="Vivamus sagittis lacus...">Popover on top</button>

<!-- Popover Demo (On the Right) -->
<button class="btn btn-secondary" type="button" data-container="body" data-toggle="popover" data-placement="right" data-trigger="hover" title="Popover on right" data-content="Vivamus sagittis lacus...">Popover on right</button>

<!-- Popover Demo (On the Bottom) -->
<button class="btn btn-secondary" type="button" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" title="Popover on bottom" data-content="Vivamus sagittis lacus...">Popover on bottom</button>

<!-- Popover Demo (On the Left) -->
<button class="btn btn-secondary" type="button" data-container="body" data-toggle="popover" data-placement="left" data-trigger="hover" title="Popover on left" data-content="Vivamus sagittis lacus...">Popover on left</button>

//- Popover Demo (On the Top)
button(type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" title="Popover on top" data-content="Vivamus sagittis lacus...") Popover on top

//- Popover Demo (On the Right)
button(type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-trigger="hover" title="Popover on right" data-content="Vivamus sagittis lacus...") Popover on right

//- Popover Demo (On the Bottom)
button(type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" title="Popover on bottom" data-content="Vivamus sagittis lacus...") Popover on bottom

//- Popover Demo (On the Left)
button(type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-trigger="hover" title="Popover on left" data-content="Vivamus sagittis lacus...") Popover on left

HTML
Pug

<!-- Popover Toggle on Click -->
<button class="btn btn-primary" type="button" data-container="body" data-toggle="popover" data-placement="top" title="Popover on click" data-content="Vivamus sagittis lacus...">Toggle popover on click</button>

<!-- Popovers Toggle on Hover -->
<button class="btn btn-accent" type="button" data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" title="Popover on hover" data-content="Vivamus sagittis lacus...">Toggle popover on hover</button>

//- Popover Toggle on Click
button(type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="top" title="Popover on click" data-content="Vivamus sagittis lacus...") Toggle popover on click

//- Popovers Toggle on Hover
button(type="button" class="btn btn-accent" data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" title="Popover on hover" data-content="Vivamus sagittis lacus...") Toggle popover on hover

Tooltips & Popovers

Static tooltips

Live demo

Static popovers

Popover top

Popover right

Popover bottom

Popover left

Live demo

Toggle on click / hover

Tooltips & Popovers

Code

Code

Code

Code

Code

Static tooltips

Live demo

Static popovers

Popover top

Popover right

Popover bottom

Popover left

Live demo

Toggle on click / hover