Руководство Bootstrap Popover (Tooltip)

View more Tutorials:

1- PopOver

PopOver это компонент интерфейса, он отображается для аннотации (или подсказки) определенного компонента на интерфейсе. Он похож на принцип  Tooltip в других библиотеках.
PopOver это библиотека  Javascript, разработанная 3-им лицом (3rd party), интегрированный в  Bootstrap как  Plugin (плагин).
popover
<button type="button" class="btn btn-warning myPopover"
   data-toggle="popover"
   data-placement="right" title="Right Popover"
   data-content="Popover show on Right">Tooltip on right</button>

...

<script>
   $(function(){
      $(".myPopover").popover();
   });
</script>
Атрибут Значимость Описание
data-toggle popover
data-placement left, right, top, bottom,auto Подсказывает местонахождения отображения PopOver, несмотря на то, что это не гарантированно. Например вы хотите, чтобы PopOver отобразился на левой стороне, но пространства на левой стороне не хватает, тогда PopOver отобразится на правой стороне.
data-trigger click, focus, hower
  • click: (Значение по умолчанию) PopOver отобразится, когда пользователь нажимает на элемент (element), и скроется когда пользователь нажмет еще раз.
  • focus: PopOver отобразится когда пользователь "focus" (фокусируется) на элементе, и скрывается когда пользователь "focus" на другой элемент.
  • hower: PopOver отобразится когда курсор (pointer) двигается над (over) элементом, и скрывается когда курсор выходит из элемента.
title
Название PopOver.
data-content
Содержание PopOver.
popover-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>PopOver Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      <style>
         .btn {margin: 5px;}
      </style>
   </head>
   <body>
      <div class="container-fluid mt-3">
         <h2>Popover via Data Attributes</h2>
         <br><br><br>

         <button type="button" class="btn btn-warning myPopover"
            data-toggle="popover"
            data-placement="right" title="Right Popover"
            data-content="Popover show on Right">Tooltip on right</button>

         <button type="button" class="btn btn-danger myPopover"
            data-toggle="popover"
            data-placement="top" title="Top Popover"
            data-content="Popover show on top.">Tooltip on top</button>

         <button type="button" class="btn btn-info myPopover"
            data-toggle="popover"
            data-placement="bottom" title="Bottom Popover"
            data-content="Popover show on Bottom.">Tooltip on bottom</button>

         <button type="button" class="btn btn-success myPopover"
            data-toggle="popover"
            data-placement="left" title="Left Popover"
            data-content="Popover show on Left">Tooltip on left</button>

      </div>
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

      <script>
         $(function(){
            $(".myPopover").popover();
         });
      </script>

   </body>
</html>

2- PopOver (Focus)

Одно из поведений   Popover это отображаться когда пользователь  "focus" (фокусируется) в элемент, которому принадлежит. И автоматически скрывается когда пользователь  "focus" на другой элемент. Например пользователь нажимает на элемент, и  Popover данного элемента отображается, когда пользователь нажимает на другое место  Popover автоматически скроется. Это было сделано, с помощью создания атрибута  data-trigger="focus" для элемента.
<button type="button"
   class="btn btn-warning myPopover"
   data-toggle="popover"
   data-placement="right" title="Dismissiabe Popover"
   data-trigger="focus"
   data-content="I display when the button is focused!">Focus Me</button>

<script>
   $('.myPopover').popover();
</script>
 
Смотрите полный пример:
dismissiable-popover-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>PopOver Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      <style>
         .btn {margin: 5px;}
      </style>
   </head>
   <body>
      <div class="container-fluid mt-3">
         <h2>Dismissiable PopOver</h2>
         <br><br>

         <button type="button"
            class="btn btn-warning myPopover"
            data-toggle="popover"
            data-placement="right" title="Dismissiabe Popover"
            data-trigger="focus"
            data-content="I display when the button is focused!">Focus Me</button>

      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

      <script>
          $('.myPopover').popover();
      </script>

   </body>
</html>

3- Popover (Hover)

С помощью создания атрибута  data-trigger="hower", при движении курсора над (over) элементом,  Popover отобразится, и когда курсор выйдет из элемента, Popover скроется.
<button type="button"
   class="btn btn-warning myPopover"
   data-toggle="popover"
   data-placement="right" title="Hover Popover"
   data-trigger="hover"
   data-content="I display when pointer over the element">Hower over Me</button>

 
<script>
   $('.myPopover').popover();
</script>
 
Полный пример:
hover-popover-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>PopOver Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      <style>
         .btn {margin: 5px;}
      </style>
   </head>
   <body>
      <div class="container-fluid mt-3">
         <h2>Popover (Hover)</h2>
         <br><br>

         <button type="button"
            class="btn btn-warning myPopover"
            data-toggle="popover"
            data-placement="right" title="Hover Popover"
            data-trigger="hover"
            data-content="I display when pointer over the element">Hover over me</button>

      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

      <script>
          $('.myPopover').popover();
      </script>

   </body>
</html>

4- Popover с содержанием HTML

По умолчанию,  Popover отображается содержание текста (text), несмотря на то, что содержание которое вы предоставляете является HTML. Так как  jQuery был конвертирован из  HTML в Text перед отображением (Метод  text был вызван для конвертации  HTML в  Text). Поэтому вам нужно добавить атрибут  data-html=true чтобы сказать  Popover plugin отобразить содержание в формате  HTML.
Popover with HTML Content
<button type="button"
   class="btn btn-warning myPopover"
   data-toggle="popover"
   data-placement="right" title="Popover with HTML content"
   data-trigger="hover"
   data-html="true"
   data-content="This is <b style='color:red;'>Simple</b> HTML Content.">Popover HTML Content</button>

<script>
   $('.myPopover').popover();
</script>
 
Если вы хотите иметь  Popover с длинным содержанием  HTML, то ниже является примером лучше:
html-content-popover-example2.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Popover Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      <style>
         .btn {margin: 5px;}
      </style>
   </head>
   <body>
      <div class="container-fluid mt-3">
         <h2>Popover (HTML Content)</h2>
         <br><br>
         <a href="#"
            class="myPopover"
            data-toggle="popover"
            data-placement="right" title="Quick guide"
            data-trigger="hover"
            data-html="true"
            data-popover-content="#myPopoverContent">Download Software</a>

         <!-- Content for Popover: -->
         <div id="myPopoverContent" style="display:none">
            <strong>Steps to do..</strong>
            <ol style="padding:10px">
               <li>Download this file</li>
               <li>Install the software</li>
               <li>Restart your computer</li>
            </ol>
         </div>

      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

      <script>
         $('.myPopover').popover({
         html : true,
         content: function() {
          var elementId = $(this).attr("data-popover-content");
          return $(elementId).html();
         }
         });
      </script>
   </body>
</html>
 

View more Tutorials: