Twitter Bootstrap: Popover vs Tooltip?

Question

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 h

Answer 1

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: `
        
Walk through the components step by step! In this guide, you'll:
        

          
Learn the semantics
          
Learn the code
          
Examine use cases
        
        

           Previous
          Next 
        
        `,
    html: true,
    placement: 'right',
    title: 'Welcome to the Tour!',
    trigger: 'hover focus'
  });
});

      Start the Demo

---