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?
3 Answers
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.
-
9Popovers can also be used to show images, as is shown here: stackoverflow.com/questions/11075560/… Jun 27, 2012 at 11:07
-
Popover also has "focus" as trigger value. It allows to dismiss it by clicking anywhere. With the tooltip, you have to click again on the object which activated the tooltip. Dec 9, 2016 at 9:53
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>
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.