Bootstrap - Popover Plugin - Coding Ninjas CodeStudio

Introduction

A popover is like a tooltip or a pop-up box that offers an extended view with heading enabled or visible when clicking or hovering. Bootstrap data API is used to populate the content of the popover. You can add popover.js or all at once bootstrap.js or bootstrap.min.js for including plugins.

Usage

How to create popover?

For creating popover, we add the data-toggle="popover" attribute to an element and define the text that has o be displayed in the popover's body by using data-content. Furthermore, for determining header text, we use the title attribute.

Note: We initialize popovers with jquery by selecting the specified element and calling the function popover().

$('#identifier').popover(options)

Popover plugins are different from only-CSS dropdown plugins, so we need to activate it using jQuery for using this plugin. for enabling all popovers, use the following script-

$(function () { $("[data-toggle = 'popover']").popover(); });

Example uses everything at once -

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">
  <h3>Popover Example</h3>
  <ul class="list-inline">
    <li><Button href="#" title="Coding ninja's blog" data-toggle="popover" data-content="Coding ninja">Click me</Button></li>
  </ul>
</div>


<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>


</body>
</html>

Output-

Different directions of Bootstrap Popover

A popover appears on the right side by default, but we can change the direction of popovers by using a data-placement attribute. The directions can be the top, left, bottom, and formal elements.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">
  <h3>Popover Example</h3>
  <ul class="list-inline" style="margin-top:100px">
    <li><Button href="#" title="Coding ninja's blog" data-toggle="popover" data-placement="top" data-content="Coding ninja">top</Button></li>
    <li><Button href="#" title="Coding ninja's blog" data-toggle="popover" data-placement="bottom" data-content="Coding ninja(bottom)">bottom</Button></li>
    <li><Button href="#" title="Coding ninja's blog" data-toggle="popover" data-placement="right" data-content="Coding ninja">right</Button></li>
    <li><Button href="#" title="Coding ninja's blog" data-toggle="popover" data-placement="left" data-content="Coding ninja">left</Button></li>
  </ul>
</div>


<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>


</body>
</html>

Output-

Closing popover

Popover closes when you click on the element again by default, but you can also close it by clicking outside element using data-trigger="focus"

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">
  <h3>Popover Example</h3>
    <a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
</div>


<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>


</body>
</html>

Output-

Note: if you want popover to be displayed when you hover on the element, use data-trigger="hover"

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">
  <h3>Popover Example</h3>
  <a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
</div>


<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>


</body>
</html>

Output-

Options

Via Boostrap API or invoked by javascript, we can use some options.

Some of the options are -

Animation

value - boolean

Default − true

CSS fade transition animation is applied to the popover.

HTML

value - boolean

Default − false

Fill up the popover using HTML. If the false value is given to this property, the innerText property will be utilized to enter information into the DOM. If you're concerned about XSS assaults, use text.

Placement

value - string|function

Default − right

in which direction the popover should be positioned - auto | top | bottom | left | right.

The function is called with the popover DOM node as its first argument and the triggering element DOM node as its second when used to determine the placement. The popover instance is set as this context.

Selector

value - string

Default − false

If a selector is provided, popover objects will be delegated to the specified targets. In practice, to have popovers added, we enable dynamic HTML content using this.

Tittle

value - string | element | function

Default − ''

The default tile value is when the title attribute is not defined.

Trigger

value - string

Default − click

how the popover should trigger - click | hover | focus | manual.

We can also add multiple at once, but the manual can not activate another trigger.

Delay

value - number, object

Default − 0

object structure delay: { "show": 500, "hide": 100 } referred to as delay in showing and hiding popover, but it is not applied to manual trigger type. Furthermore, if the number is passed in, the delay is applied to both show/hide.

Container

value - string | element | false

Default − false

This option is convenient since it allows you to position the popover near the triggering element in the flow of the page, preventing the popover from drifting away from the triggering element during a window resize.

Container: 'body' append pop over to the body.

Events

Popover plugin works with some events, which hook with the function.

show.bs.popover

Whenever the show instant method is called, this event fires immediately.

$('#mypopover').on('show.bs.popover', function () {
   // do something
})

shown.bs.popover

This event fires whenever the popover has been made visible to the user.

$('#mypopover').on('shown.bs.popover', function () {
   // do something
})

hide.bs.popover

Whenever the hide instant method is called, this event fires immediately.

$('#mypopover').on('hide.bs.popover', function () {
   // do something
})

hidden.bs.popover

This event is triggered when the popover has been completed hidden from the user.

$('#mypopover').on('hidden.bs.popover', function () {
   // do something
})

inserted.bs.popover

After the show.bs.popover event, when the popover template has been added to the DOM, this event is fired

$('#mypopover').on('inserted.bs.popover', function () {
   // do something
})

<div clas = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-primary popover-show" 
      title = "Popover title" data-container = "body" data-toggle = "popover" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
</div>


<script>
   $(function () { $('.popover-show').popover('show');});
   
   $(function () { $('.popover-show').on('shown.bs.popover', function () {
      alert("Alert message on show");
   })});
</script>

Output-