راهنماها

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

راهنماها

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