We now have a youtube channel. Subscribe!

Bootstrap | Popover Plugin

Bootstrap | Popover Plugin


Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this section of our tutorial on Bootstrap, we will discuss about the Bootstrap Popover Plugin.

The popover is similar to tooltip, giving an extended view complete with a heading. In order for popover to activate, a user simply needs to hover the cursor over the element. The contents of popover can be populated entirely using the Bootstrap Data API. This method requires a tooltip.

If you want to add this bootstrap plugin functionality individually, you are going to need popover.js and it depends on the tooltip plugin. Else, as mentioned in the tutorial Bootstrap plugins overview, you can include bootstrap.js or the manified bootstrap.min.js.

Usage

The Popover plugin generates content and markup on demand, and by default it places popover after their trigger element. Popover can be added in the following two ways -


  • Via data-attributes - in order to add a popover, add data-toggle = "popover" to an anchor/button tag. The title of the anchor is going to be the text of a popover. By default, popover is set to top by the plugin.
<a href = "#" data-toggle = "popover" title = "Example popover">
   Hover over me
</a>
  • Via JavaScript - Trigger the popover via JavaScript with the code below -
$('#identifier').popover(options)

Popover plugin is NOT only-css plugin like dropdown or other plugins studied in previous tutorials. To use this plugin you must activate it by using jquery. To enable all the popovers on your page simply use this script -

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


Example

Following example demonstrates the usage of popover plugin via data attributes -

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover on left">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover on top">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover on bottom">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "right" 
      data-content = "Some content in Popover on right">
      
      Popover on right
   </button>
   
</div>

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

Output

When the above example is executed, it will produce the following result -


Options

There are certain options that can be added using the Bootstrap Data API or invoked by JavaScript. The following table below lists the options -

Option NameType/Default ValueData attribute nameDescription
animationboolean Default − truedata-animationApplies a CSS fade transition to the popover.
htmlboolean Default − falsedata-htmlInserts HTML into the popover. If false, jQuery’s text method will be used to insert content into the dom. Use text if you’re worried about XSS attacks.
placementstring|function Default − topdata-placementSpecifies how to position the popover (i.e., top|bottom|left|right|auto). When auto is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.
selectorstring Default − falsedata-selectorIf a selector is provided, popover objects will be delegated to the specified targets.
titlestring | function Default − "data-titleThe title option is the default title value if the title attribute isn’t present.
triggerstring Default − 'hover focus'data-triggerDefines how the popover is triggered − click| hover | focus | manual. You may pass multiple triggers; separate them with a space.
delaynumber | object Default − 0data-delay

Delays showing and hiding the popover in ms — does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is −

delay: { show: 500, hide: 100 }
containerstring | false Default − falsedata-containerAppends the popover to a specific element. Example: container: 'body'


Methods

The following are some useful methods for popover -

MethodDescriptionExample

Options − .popover(options)

Attaches a popover handler to an element collection.
$().popover(options)

Toggle − .popover('toggle')

Toggles an element's popover.
$('#element').popover('toggle')

Show − .popover('show')

Reveals an element's popover.
$('#element').popover('show')

Hide − .popover('hide')

Hides an element's popover.
$('#element').popover('hide')

Destroy − .popover('destroy')

Hides and destroys an element's popover.
$('#element').popover('destroy')

Example

Following example demonstrates the usage of the popover plugin methods -

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default popover-show" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary popover-hide" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-hide method">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success popover-destroy" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover-destroy method">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning popover-toggle" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-toggle method">
      
      Popover on right
   </button>
	
   <br><br><br><br><br><br>
   
   <p class = "popover-options">
      <a href = "#" type = "button" class = "btn btn-warning" 
         title = "<h2>Title</h2>" data-container = "body" 
         data-toggle = "popover" data-content = "
         <h4>Some content in Popover-options method</h4>">
         
         Popover
      </a>
   </p>
   
   <script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('.popover-hide').popover('hide');});
      $(function () { $('.popover-destroy').popover('destroy');});
      $(function () { $('.popover-toggle').popover('toggle');});
      $(function () { $(".popover-options a").popover({html : true });});
   </script>
	
</div>

Output

When the above example is executed, it will produce the following result -



Events

Following table lists the events to work with popover plugin. These events may be used to hook into the function -

EventDescriptionExample
show.bs.popoverThis event fires immediately when the show instance method is called.
$('#mypopover').on('show.bs.popover', function () {
   // do something
})
shown.bs.popoverThis event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).
$('#mypopover').on('shown.bs.popover', function () {
   // do something
})
hide.bs.popoverThis event is fired immediately when the hide instance method has been called.
$('#mypopover').on('hide.bs.popover', function () {
   // do something
})
hidden.bs.popoverThis event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).
$('#mypopover').on('hidden.bs.popover', function () {
   // do something
})

Example

Following example demonstrates the usage of the popover plugin events -

<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

When the above example is executed, it will produce the following result -



Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Alert Plugin.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain