Bootstrap - Popover Plugin

devika varshney
Last Updated: May 13, 2022

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-

Methods

  • Toggle

the popover is toggled of an element.

myPopover.toggle()
  • Show

the popover is revealed of an element.

myPopover.show()
  • Hide

the popover is hidden of an element.

myPopover.hide()
  • Dispose

the popover is hidden and destroyed by an element.

myPopover.dispose()
  • Enable

The ability to be shown is given to an element's popover. by default, it is enabled.

myPopover.enable()
  • Disable

the ability to be shown is removed for an element's popover. 

myPopover.disable()
  • Update

of the element's popover position is updated.

myPopover.update()

Frequently Asked Questions

  1. What is the toggleEnabled method?

toggleEnabled method in which element's popover to be shown or hidden ability gets toggled.

myPopover.toggleEnabled()


2. Where do disable elements?

With disabled attributes, the elements are not interactive; the user cannot see any popover while hovering or clicking the element.

Key Takeaways

Don't come to a halt here. Check out our Importance of JavaScript to web programming. You can also check out the blog on the JavaScript Interview Questions. Check out some javascript certifications by clicking on Javascript certifications.

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think