Q:

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? 

A:

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. 

A:

Popvers are just an extension to tooltips that look a little different and are designed for more content.  
For example, popovers have a header and content section but tooltips are just content. 

A:

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

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

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>

