Popovers

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

Examples

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title"
    data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle
    popover</button>

Directions

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. 

<button class="btn btn-secondary mr-4 mb-3" 
    data-container="body"
    data-toggle="popover"
    data-placement="top"
    data-trigger="hover"
    title="Cool popover title"
    data-content="And here's some amazing content. It's very engaging. Right?"
    >
    On top
  </button>

  <button class="btn btn-secondary mr-4 mb-3" 
    data-container="body"
    data-toggle="popover"
    data-placement="right"
    data-trigger="hover"
    title="Cool popover title"
    data-content="And here's some amazing content. It's very engaging. Right?"
    >
    On right
  </button>

  <button class="btn btn-secondary mr-4 mb-3" 
    data-container="body"
    data-toggle="popover"
    data-placement="bottom"
    data-trigger="hover"
    title="Cool popover title"
    data-content="And here's some amazing content. It's very engaging. Right?"
    >
    On bottom
  </button>

  <button class="btn btn-secondary mr-4 mb-3" 
    data-container="body"
    data-toggle="popover"
    data-placement="left"
    data-trigger="hover"
    title="Cool popover title"
    data-content="And here's some amazing content. It's very engaging. Right?"
    >
    On left
  </button>

Popovers skin

Add data-skin="dark", data-skin="primary" for dark and primary popover 

<button class="btn btn-secondary mr-4 mb-3" data-container="body" data-toggle="popover"
    data-placement="bottom" title="Cool popover title"
    data-content="And here's some amazing content. It's very engaging. Right?">
    Default skin
  </button>
  <button class="btn btn-dark mr-4 mb-3" data-container="body" data-toggle="popover"
    data-placement="top" data-skin="dark" title="Cool popover title"
    data-content="And here's some amazing content. It's very engaging. Right?">
    Dark skin
  </button>

  <button class="btn btn-primary mr-4 mb-3" data-container="body" data-toggle="popover"
    data-placement="right" data-skin="primary" title="Cool popover title"
    data-content="And here's some amazing content. It's very engaging. Right?">
    Primary skin
  </button>

For more details please visit Bootstrap official site. Bootstrap Documentation