Twitter Bootstrap: Popover vs Tooltip?

What's the difference between these two? To me a Popover just looks like a larger Tooltip with thicker borders. Is there any qualitative difference, or is it just a matter of how bold you want it to be?

Solution 1:

Popovers require Tooltips to be included. Aside from the visual difference, popovers have an option to display both a title and content, while tooltips only have an option to display a title.

Solution 2:

Semantically, you'd typically want to use popovers to provide additional related information. You'd use tooltips for clarification or tips.

Popovers

short or long
can contain all kinds of content (e.g. images, headers, lists)
usually dismissable, available on click or hover
allow for additional interaction (e.g. buttons)
meant to give additional related context regarding the thing focused

fully-featured popover

Tooltips

short
just small amount of text (no other types of content)
usually available only on hover
meant to clarify or help you use the thing focused

tooltip example

A similar post from UX SE which explains well when to use which.

Technically, there isn't much of a difference. They both work similarly. You can use data- attributes or JS for either.

They work using the same library and so have a lot of the same options for interaction (hover/focus, content inclusion, side on which to appear, etc.).

Code example:

$(function() {
  $('.favorite').tooltip({
    placement: "right",
    title: "Click to mark as favorite question (click again to undo)"
  });

  $('.demo-start').popover({
    content: `
        <p>Walk through the components step by step! In this guide, you'll:</p>
        <ol>
          <li>Learn the semantics</li>
          <li>Learn the code</li>
          <li>Examine use cases</li>
        </ol>
        <div class="btn-group text-light d-flex justify-content-end" role="group" aria-label="Navigation buttons">
          <button type="button" class="btn btn-secondary" disabled><i class="fas fa-arrow-left mr-1"></i> Previous</button>
          <button type="button" class="btn btn-secondary">Next <i class="fas fa-arrow-right ml-1"></i></button>
        </div>
        `,
    html: true,
    placement: 'right',
    title: 'Welcome to the Tour!',
    trigger: 'hover focus'
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

<a class="demo-start btn btn-dark m-5" href="#" role="button">
    <i class="fas fa-play text-light mr-1"> </i> Start the Demo</a>
<br>
<i class="favorite fas fa-star m-5 text-secondary"></i>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Twitter Bootstrap: Popover vs Tooltip?

Solution 1:

Solution 2:

Popovers

Tooltips

Related

Recent Posts