Twitter Bootstrap : Popover ou info-bulle ?

Question

Quelle est la différence entre ces deux-là ? Pour moi, un Popover ressemble à une infobulle plus grande avec des bords plus épais. Y a-t-il une différence qualitative, ou est-ce simplement une question d'audace ?

Answer 1

Popovers exiger Infobulles pour être inclus. Outre la différence visuelle, les popovers ont la possibilité d'afficher à la fois un titre et un contenu, tandis que les tooltips n'ont la possibilité d'afficher qu'un titre.

Answer 2

Sémantiquement Dans le cas d'un système de gestion de l'information, vous utiliserez généralement des popovers pour fournir des informations complémentaires. Vous utiliseriez des infobulles pour des clarifications ou des conseils.

Popovers

• court ou long
• peuvent contenir toutes sortes de contenus (par exemple, des images, des en-têtes, des listes)
• généralement révocable, disponible en cas de clic ou de survol.
• permettre une interaction supplémentaire (par exemple, des boutons)
• destiné à donner un contexte supplémentaire concernant la chose en question.

Infobulles

• court
• juste une petite quantité de texte (aucun autre type de contenu)
• généralement disponible uniquement au survol
• destiné à clarifier ou à vous aider à utiliser l'objet en question.

Un post similaire de UX SE qui explique bien quand utiliser quel.

---

Techniquement il n'y a pas beaucoup de différence. Ils fonctionnent tous deux de manière similaire. Vous pouvez utiliser data- attributs ou JS pour l'un ou l'autre.

Ils utilisent la même bibliothèque et disposent donc d'un grand nombre d'options d'interaction (survol/focus, inclusion de contenu, côté sur lequel apparaître, etc.)

Exemple de code :

$(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>

---

Answer 3

Les popvers ne sont qu'une extension des infobulles qui ont un aspect un peu différent et sont conçus pour un contenu plus important.

Par exemple, les popovers ont un en-tête et une section de contenu, mais les tooltips ne sont que du contenu.