How to Create Popovers with Bootstrap 4

In this article, we discuss How to Create Popovers with Bootstrap 4

How to Create Popovers with Bootstrap 4

How to Create Popovers with Bootstrap 4
How to Create Popovers with Bootstrap 4

How to Create Popovers with Bootstrap 4

Creating Popovers with Bootstrap

A popover is a small overlay of content that is used to display secondary information of any element when it is clicked by a user, like those on the iPad.

First, you can check your bootstrap and jQeury versions if you didn’t add These Links Below you can add them from getbootstrap.com

  • jQuery.min.js
  • Popper.min.js
  • bootstrap.min.js

How to Create Popovers with Bootstrap 4

Step 1: Adding the Popover Markup

To create a popover, you need to add the data-toggle="popover" attribute to an element. Whereas, popover’s title and its content that would display upon trigger or activation can be specified using the title and data-content attribute respectively.

Here is the standard markup for adding a popover to a button.

<button type="button" data-toggle="popover" title="Popover title" data-content="Here's some amazing content.">Click to toggle popover</button>

Similarly, you can add popovers to the other elements such as links, icons, etc.

Note: For performance reasons the popovers data-apis are opt in like tooltips, means to use popovers you must initialize them yourself with popover() method. Also, popovers with zero-length title and content values are never displayed, and popovers on hidden elements will not work.

How to Create Popovers with Bootstrap 4

Step 2: Triggering the Popovers

Popovers can be triggered via JavaScript — just call the popover() Bootstrap method with the idclass or any CSS selector of the required element in your JavaScript code.

Example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Placement of Bootstrap 4 Popover via Data Attributes</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>


</head>
<body>

    <div class="mb-2">
        <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="top" title="Popover title" data-content="Popover on top">Popover on top</button>
<button type="button" class="btn btn-info" data-toggle="popover" data-placement="bottom" title="Popover title" data-content="Popover on bottom">Popover on bottom</button>

        <button type="button" class="btn btn-success" data-toggle="popover" data-placement="right" title="Popover title" data-content="Popover on right">Popover on right</button>
        
        <button type="button" class="btn btn-warning" data-toggle="popover" data-placement="left" title="Popover title" data-content="Popover on left">Popover on left</button>
    </div>
<p><strong>Note:</strong> Click on the buttons to show/hide the popover.</p>

</body>
</html>

How to Create Popovers with Bootstrap 4

SCRIPT

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

Output

popovers
How to Create Popovers with Bootstrap 4

How to Create Popovers with Bootstrap 4

Positioning of Popovers via JavaScript

The following example will show you how to set the direction of popovers via JavaScript.

Script.js

$(document).ready(function(){
    $(".pop-top").popover({placement : 'top'});
    $(".pop-right").popover({placement : 'right'});
    $(".pop-bottom").popover({placement : 'bottom'});
    $(".pop-left").popover({ placement : 'left'});
});

Hiding the Popovers on Next Click

By default popovers are not hiding until you click the trigger element once again. You can use the focus trigger to hide the popovers when the user makes the next click.

<a href="#" class="btn btn-primary btn-lg" data-toggle="popover" tabindex="0" data-trigger="focus" title="Popover title" data-content="Here's some amazing content.">Dismissible popover</a>

Note: To make this feature work properly across the browsers, you must use the <a> tag, not the <button>  tag, and you also must include a tabindex attribute.

How to Create Popovers with Bootstrap 4

Options

There are certain options which may be passed to popover() Bootstrap method to customize the functionality of the popover plugin.

NameTypeDefault ValueDescription
animationbooleantrueApply a CSS fade transition to the popover.
containerstring | element | falsefalseAppends the popover to a specific element.Specify container: 'body' to avoid rendering problems in more complex components (like input groups, button groups, etc.)
contentstring | element | functionSets the default content value if data-content attribute isn’t present.
delaynumber | object0Time to delay in showing and hiding the popover (ms) — does not apply to manual trigger type.If a number is supplied, delay is applied to both hide/showObject structure is: delay: { "show": 500, "hide": 100 }
htmlbooleanfalseInsert HTML into the popover. If false, jQuery’s text() method will be used to insert content into the DOM.Use simple text if you’re worried about XSS attacks.
placementstring | function‘right’Sets the position of the popover — top | bottom | left | right | auto.When 'auto' value is specified, it will dynamically reorient the popover.
selectorstring | falsefalseIf a selector is provided, popover objects will be attached to the specified targets.This is normally used to apply popovers to dynamically added DOM elements.
templatestring'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'Base HTML to use when creating the popover.The popover’s title will be inserted into the .popover-header, the popover’s content will be inserted into the .popover-body, and the .arrow element will become the popover’s arrow.The outermost wrapper element should have the .popover class.
titlestring | element | functionSets the default title value if title attribute isn’t present.
triggerstring‘click’Specify how popover is triggered — click | hover | focus | manual. You can pass multiple triggers; separated with a space.The value 'manual' indicates that the popover will be triggered programmatically via the .popover('show').popover('hide') and .popover('toggle') methods; this value cannot be combined with any other trigger.
offsetnumber | string0Offset of the popover relative to its target.
fallbackPlacementstring | array‘flip’Allows you to specify which position Popper will use on fallback.
customClassstring | functionAdd classes to the popover when it is shown. Please note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces like: 'class1 class2'.You can also pass a function that should return a single string containing additional class names.
boundarystring | element‘scrollParent’Overflow constraint boundary of the popover. Accepts the values of 'viewport''window''scrollParent', or an HTMLElement reference (JavaScript only).
sanitizebooleantrueEnable or disable the sanitization. If activated 'template''content', and 'title' options will be sanitized.
whiteListobjectvalueObject which contains allowed attributes and tags.
sanitizeFnnull | functionnullAllows you to specify your own sanitize function.
popperConfignull | objectnullAllows you to change Bootstrap’s default Popper config, see Popper’s configuration.

You may set these options either through the use of data attributes or JavaScript. For setting the popovers options via data attributes, just append the option name to data- along with the correct value, like data-animation="false"data-placement="bottom" etc.

However, JavaScript is the more preferable way for setting these options as it saves you from doing repetitive work. See the popover’s method $().popover(options). in the section below to know how to set the options for popovers using JavaScript.

How to Create Popovers with Bootstrap 4

Methods

These are the standard Bootstrap’s popover methods:

$().popover(options)

This method attaches the popover handler to a group of elements. It also allows you to set the options for the popovers so that you can customize them according to your needs.

The following example will insert the specified text inside the popovers title if the value of the title attribute is omitted or missing from the selected elements:

add to your custom js

$(document).ready(function(){
    $("#myPopovers a").popover({
        title: 'Default title value'
    });
});

The following jQuery code will trigger the popovers on mouse hover instead of click:

$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        trigger: 'hover'
    });
});

The following example will show you how to place the HTML content inside a popover:

$(document).ready(function(){
    $("#myPopover").popover({
        title: '<h3 class="custom-title"><i class="fa fa-info-circle"></i> Popover Info</h3>',
        content: '<p>This is a <em>simple example</em> demonstrating how to insert HTML code inside <strong>Bootstrap popover</strong>.</p>',
        html: true
    }); 
});

The following example will show you how to control the timing of showing and hiding of the popover using the popover’s delay option via JavaScript.

$(document).ready(function(){
    // Showing and hiding popover with same speed
    $(".popover-tiny").popover({
        delay: 500
    });
    
    // Showing and hiding popover with different speed
    $(".popover-large").popover({
        delay: {show: 0, hide: 2000}
    }); 
});

The following example will show you how you can create your own custom template for the Bootstrap popovers instead of using the default one.

$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        html: true,
        template: '<div class="popover"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div><div class="popover-footer"><a href="#" class="btn btn-info btn-sm">Close</a></div></div>'
    });
    
    // Custom jQuery to hide popover on click of the close button
    $(document).on("click", ".popover-footer .btn" , function(){
        $(this).parents(".popover").popover('hide');
    });
});

The following example will insert the dynamically generated HTML code of the popover at the end of a .wrapper element instead of the <body> element.

$(document).ready(function(){
    // Append popover HTML to wrapper element
    $("#myPopovers a").popover({container: '.wrapper'}); 
});

Note: Overriding the popover’s default container option value does not produce any visible difference on the page. To see the actual result you need inspect the resulting DOM using the Firebug or Developer tools.

Similarly, you can set other options for the popovers using the $().popover(options) method. Let’s check out the other methods of the Bootstrap popover plugin.

.popover(‘show’)

This method reveals an element’s popover.

$(document).ready(function(){
    $(".show-popover").click(function(){
        $("#myPopover").popover('show');
    }); 
});

.popover(‘hide’)

This method hides an element’s popover.

$(document).ready(function(){
    $(".hide-popover").click(function(){
        $("#myPopover").popover('hide');
    }); 
});

.popover(‘toggle’)

This method toggles an element’s popover.

$(document).ready(function(){
    $(".toggle-popover").click(function(){
        $("#myPopover").popover('toggle');
    }); 
});

.popover(‘dispose’)

This method hides and destroys an element’s popover.

$(document).ready(function(){
    $(".destroy-popover").click(function(){
        $("#myPopover").popover('dispose');
    }); 
});

.popover(‘enable’)

This method gives an element’s popover the ability to be shown. Popovers are enabled by default.

$(document).ready(function(){
    $(".enable-popover").click(function(){
        $("#myPopover").popover('enable');
    }); 
});

.popover(‘disable’)

This method removes the ability for an element’s popover to be shown. The popover will only be able to be shown if it is re-enabled.

$(document).ready(function(){
    $(".disable-popover").click(function(){
        $("#myPopover").popover('disable');
    }); 
});

.popover(‘toggleEnabled’)

This method toggles the ability for an element’s popover to be shown or hidden.

$(document).ready(function(){
    $(".toggle-enabled-popover").click(function(){
        $("#myPopover").popover('toggleEnabled');
    }); 
});

.popover(‘update’)

This method updates the position of an element’s popover.

$(document).ready(function(){
    $(".update-popover").click(function(){
        $("#myPopover").popover('update');
    }); 
});

Note: if you want all methods and options you can write in one script only.

How to Create Popovers with Bootstrap 4

Events

Bootstrap’s popover class includes few events for hooking into popover functionality.

EventDescription
show.bs.popoverThis event fires immediately when the show instance method is called.
shown.bs.popoverThis event is fired when the popover has been made visible to the user. It will wait until the CSS transition process has been fully completed before getting fired.
hide.bs.popoverThis event is fired immediately when the hide instance method has been called.
hidden.bs.popoverThis event is fired when the popover has finished being hidden from the user. It will wait until the CSS transition process has been fully completed before getting fired.
inserted.bs.popoverThis event is fired after the show.bs.popover event when the popover template has been added to the DOM.
How to Create Popovers with Bootstrap 4

The following example displays an alert message to the user when fade-out the transition of the popover has been fully completed.

$(document).ready(function(){
    $('[data-toggle="popover"]').on('hidden.bs.popover', function(){
        alert("Popover has been completely closed.");
    });
});

we have come to the end of our article. I hope you understood How to Create Popovers with Bootstrap 4With Examples

Source: Various

Also CheckoutBootstrap 4 Alerts

If you intreasted in Entertainment genre MOVIES STREAMING DATES

Related Posts

Leave a Reply

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