Bootstrap Popover : How to Create Awesome Dropdown

In this tutorial i will describe how to use bootstrap popover for custom HTML control, normally we used popover for display tooltip information on help, but sometimes we need to HTML control or html form in popover. This tutorial help you to create HTML control on popover.

Bootstrap popover is use to show information or HTML element.Bootstrap is very popular CSS framework to create elegant UI with in minute.This Bootstrap tutorial help to create beautiful popover using static information or HTML content.
You can use popover using data attribute or JavaScript. There are a lot of callback method and events available for bootstrap popover.

Also Checkout other Popup Box tutorial,

Option 1: Using data attribute

You can define popover on anchor/button element using data-toggle = "popover" attribute. The title of the anchor/button will be the text of a popover which will show. The default position of popover is top by the plugin.

Where :

  • data-toggle : Use to activates the popover on element.
  • title : Use for title of the popover.
  • data-content : Use to display content inside the popover’s body.

Option 2: Using JavaScript

You can also initialize popover on HTML element using jquey selector.We can use HTML element Id/Class as a jQuery selector and call popover() method on it.The following code will enable popovers on all HTML elements which has data-toggle attribute.

Simple Steps to Create HTML control With in Bootstrap Popover

Step 1: Include all necessary library into head section of index.php file.

Step 2: We need to define HTML layout.

Above code create a link button which will use to generate popover on click. We have HTML select control with hide properties.

Step 3: Now we will call bootstrap popover method.

Live Demo and Download Source Code

3 thoughts on “Bootstrap Popover : How to Create Awesome Dropdown

  1. Hi Parvez
    I am trying to place a drop down in body of popover and depending on selected value in dropdown I want to show data related to that selected option in the same body of the popover how can I achieve this……..

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.