5 Bootstrap Popovers with Custom HTML Contents

I am having trouble separating the content of the bootstrap5 popover from the HTML attributes, unlike other components where it is achievable.

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="472528283334333526370772697769776a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<a type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover">Click to toggle popover</a>
<div id="customdiv" style="display: none">
  <h1> popover </h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2919d8097b2c0dccbdcc3">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9d8e9fafdac1dfc1dfc28d8a9b8edc">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>

javascriptcssbootstrap-5

Answer №1

No one provided a correct solution using just vanilla JavaScript without relying on jQuery. This is particularly significant since Bootstrap 5 no longer requires jQuery.

Markup:

<a class="btn btn-link" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content-id="popover-content" tabindex="0" role="button">
  Open Popover
</a>

<div id="popover-content" class="d-none">
  Popover content with <strong>HTML</strong>.
</div>

JavaScript:

const elements = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
elements.map((element) => {
  let options = {
    animation: false,
  }
  if (element.hasAttribute('data-bs-content-id')) {
    options.content = document.getElementById(element.getAttribute('data-bs-content-id')).innerHTML;
    options.html = true;
  }
  new bootstrap.Popover(element, options);
})

Answer №2

const elements = Array.from(document.querySelectorAll('[data-bs-toggle="popover"]'));
const popovers = elements.map((element) => {
    return new bootstrap.Popover(element, {html: true});
});

Answer №3

Putting an HTML element in a popover container is a simple process

To achieve this, the HTML element should be directly placed within the data-bs-content tag. Additionally, the data-bs-html attribute should be set to "true" to ensure that the content is parsed as HTML. It is also necessary to disable the sanitize feature to make the content readable as HTML.

This code has been successful for me, so I encourage you to give it a try as well.

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5d50504b4c4b4d5e4f7f0a110f110f125d5a4b5e0c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<a type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover"
data-bs-html="true" data-bs-sanitize="false"
data-bs-content='<div class="popover fs-6" role="tooltip">
 <div class="popover-body">Providing your birthday helps make sure you get the right Facebook experience for your age. If you want to change who sees this, go to the About section of your profile. For more details, please visit our <a href="#"> Data Policy</a>.</div></div>'>Click to toggle popover</a>


<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="385b574a5d780a16011609">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="482a27273c3b3c3a2938087d66786678652a2d3c297b">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>

Answer №4

No satisfactory answers were provided that addressed my specific requirement for the popover to only appear on a specific event triggered by data-bs-trigger. Here is the solution I came up with:

Element that triggers the popover on hover:

<a class="btn btn-question-tag" 
   data-bs-toggle="popover" 
   data-bs-trigger="hover focus" 
   data-content-id="popover-27" 
   href="#">
element to trigger popover
</a>

Element containing the content for the popover:

<div style="display: none;" id="popover-27">
    <div class="popover" role="tooltip">
      This is the content inside the popover
    </div>
</div>

Javascript implementation:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    const popoverId = popoverTriggerEl.attributes['data-content-id'];
    if (popoverId) {
        const contentEl=$(`#${popoverId.value}`).html();
        return new bootstrap.Popover(popoverTriggerEl, {
            content: contentEl,
            html: true,
        });
    }else{//handle the case when data-content-id attribute is missing
    }
}

Answer №5

Using Bootstrap v5.2.0 and Laravel 8 in app.js

document.addEventListener('DOMContentLoaded', function() {
 var element = document.getElementById('myPopover');
 if (element) {
     var popover = new bootstrap.Popover(element, {
         container: 'body',
         html: true,
         content: function() {
             return document.getElementById('popover-content').innerHTML;
         },
     });
 }
});

Implementing Laravel blade

<a tabindex="0" type="button" data-bs-toggle="popover" data-bs-placement="bottom" aria-label="Share this article socially" id="myPopover" >
    <img src="{{asset('layout/icon_return.svg')}}" alt="share icon">
</a>

<div class="pop-in" id="popover-content" style="display:none;"> <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group" aria-label="First group">
        <a class="btn btn-secondary" href="https://www.facebook.com/sharer.php?u={{ $item->url }}" target="_blank" rel="noopener" type="button" ><img src="{{asset('layout/facebook.svg')}}" alt="Share Page on Facebook" ></a>
        <a class="btn btn-secondary" href="https://twitter.com/intent/tweet?url={{ $item->url }}%2F&text={{ $item->title }}.&hashtags=css,html" target="_blank" rel="noopener" type="button" ><img src="{{asset('layout/twitter.svg')}}" alt="Share Page on Twitter"></a>
        <a class="btn btn-secondary" href="https://www.linkedin.com/shareArticle?mini=true&url={{ $item->url }}%2F&item={{ $item->title }}" target="_blank" rel="noopener" type="button" ><img src="{{asset('layout/linkedin.svg')}}" alt="Share Page on LinkedIn" ></a>
    </div>
</div>
</div>

Answer №6

While the answers above seem suitable, there is a minor correction to be made. The Content option in Bootstrap 5 does not work with innerHTML as it requires the type element/string/function to fetch the content.

Therefore, the first step is to create a div for the content with an ID and then wrap it inside a hidden div to ensure it is displayed in the main flow. Utilizing the html and content options provided by Bootstrap popover, we can insert the custom popover content.

Instead of using innerHTML, the popover content element to be displayed should be 

document.getElementById('mypopover-content')
and not 
document.getElementById('mypopover-content').innerHTML
.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body',
  html: true,
  content: document.getElementById('mypopover-content'),
})
body {
margin: 10px !important;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f7959898838483859687b7c2d9c7d9c6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa9895958e898e889b8abacfd4cad4cb">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

<a class="btn btn-primary example-popover" role="button" tabindex="0"  title="Content demonstration popover"
>Trigger popover with other html content</a>

<div hidden>
  <div id="mypopover-content">
    <p>This is the custom popover html content that should be inserted into my example popover</p>
    <button type="button" class="btn btn-primary">and the button as well</button>
  </div>
</div>

Answer №7

let triggerList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
let popoverList = triggerList.map(function (triggerEl) {
  return new bootstrap.Popover(triggerEl)
})
let customPopover = new bootstrap.Popover(document.querySelector('.element'), {
        trigger: 'hover',
        html: true,
        content:function () {
            return '<label>Custom Label</label>';
        },
})

Answer №8

var hideDiv = document.getElementsByClassName('hide')[0].style.visibility = 'hidden'
var popoverBtn = document.getElementById('btn-action')
var popover = new bootstrap.Popover(popoverBtn, {
    placement: 'bottom',
    html: true,
    content: function() {
        return document.getElementById('id-content-div');
    }

})
   var showDiv = document.getElementsByClassName('hide')[0].style.visibility = 'visible'
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<a type="button" class="btn btn-lg btn-danger" id="btn-action">Click to toggle popover</a>
<div id="id-content-div" class="hide">
  <h1> popover </h1>
  <p>Hello popover world</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/popper/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>

Answer №9

$(function() {
var options = {
    html: true,
    title: "Optional: GREETING(Will override the default-the inline title)",
    //html element
    content: $("#popover-content")
    //Doing below won't work. Shows title only
    //content: $("#popover-content").html()

  }
  var exampleEl = document.getElementById('example')
  var popover = new bootstrap.Popover(exampleEl, options)
})
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2d0ddddc6c1c6c0d3c2f2879c839c83">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d0f0202191e191f0c1d2d58435c435c">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="583a37372c2b2c2a392875313b37362b1869766d7668">[email protected]</a>/font/bootstrap-icons.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<div id="popover-content">
  <div class="input-group">
    <input type="text" class="form-control form-control-sm" placeholder="Search" name="search">
    <div class="input-group-btn">
      <button class="btn btn-danger" type="submit">
        <i class="bi bi-search"></i>
      </button>
    </div>
  </div>
  <div class="col-sm-8"></div>
  <button class="btn btn-success m-3">Button</button>
  <input type="submit" class="btn btn-danger" placeholder="Button red">
</div>

<a id="example" tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" title="Default: Html inside popover" data-bs-content="And here's some amazing content. It's very engaging. Right? This is default, but Can be empty">Html inside popover</a>

Answer №10

It is important to note that having a title and content with zero length will prevent the popover from appearing. This information can be found in the Bootstrap documentation.

"A popover will not display if the title and content have zero length."

<a type="button" class="btn btn-lg btn-danger"
        data-bs-toggle="popover"
        data-bs-title="Hello">Click to toggle popover</a>

Check out the demo here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Move files into the designated folder and bundle them together before publishing

Is there a way to transfer the files listed in package.json (under the File field) to a specific folder in order to bundle them together with npm publish? Here is the structure of my repository: . ├── package.json └── folder0 ├── fil ...

javascriptnode.jsnpmnode-modulesnpm-scripts

The deployment on heroku encountered an error during the build process

I'm attempting to deploy my React application on Heroku, but I keep encountering the following errors: -----> Installing dependencies Installing node modules npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ...

javascriptreactjsnpmherokubuild

Utilizing ng-class for dynamic routing and controlling

I am currently in the process of developing a dynamic framework using AngularJS. My plan involves allowing users to add new templateUrl and controller from a JSON file, like the one shown in templates.json: { "pages" : [ { "name" : "home" ...

javascriptangularjsjsontemplatesdynamic

Looking for a way to locate a string for a Boolean field in mongoDB?

I am dealing with a situation where I have a field name and criteria to search for in a collection. However, the types of fields I am working with vary, ranging from String to Number to Boolean. I attempted the following approach: const fieldName1 = &ap ...

javascriptnode.jsmongodb

Executing a JavaScript function by utilizing the # symbol in the URL: Tips and Tricks

It all began with a function called loadround that changed the innerHTML of an iframe. The links within the iframe would then change the page when clicked, but hitting the back button made the loadround page vanish. I pondered over this issue multiple time ...

javascripturlhash

media query for css on windows 7 mobile devices

Is there a way to apply CSS media queries specifically for Windows phone 7? I have attempted the following code without success: @media only screen and (max-width: 480px) and (min-width: 5px) { // css here } Any advice or guidance would be greatly appr ...

csswindows-phone-7mobilemedia-queries

When working with Nuxt 3, the referrer header may sometimes return as undefined

I am looking to capture the referrer header and store it in a cookie so that I can later use it to populate an axios request during the user's journey on my website. In my app.vue, I currently have the following code snippet: const headers = useReque ...

javascriptvue.jsnuxt.jsvuejs3nuxtjs3

The creation of a parameterized function that doubles as an object property

interface item { first: string; last: string; } const itemList = Item[]; updateAttribute = (index, attributeToUpdate) => { itemList[index].attributeToUpdate = "New first/last" } The snippet above showcases an interface named item with propertie ...

javascripttypescript

Transitioning library functions to utilize promises

converter.json2csv(MAP.fls, function (error, csv) { if (error) { return error; } file_system.writeFile(MAP.output.res, csv, function (error) { if (error) { return error; } }); }); I am currently working ...

javascriptbluebird

Can HTML5 be used to store IDs in PHP chat applications?

I'm in the process of developing a chat application with PHP. Everything is functioning properly, but I have encountered a potential loophole. I am implementing AJAX to fetch chat data as the user scrolls, similar to platforms like Facebook and Twitte ...

javascriptphpjqueryhtmlchat

Ways to effectively go through local storage using a loop

I'm currently working on enhancing my navbar by adding links based on searches made by users and their favorite selections. My goal is to avoid duplicate entries in the "past searched" section if the current search already exists in the list. I'm ...

javascripthtmljquerylocal-storage

Tips for positioning one set of menu buttons to the left and another set to the right

I am currently utilizing bootstrap 5 and I want to align two groups of menu buttons on the same line - one to the left and the other to the right. At the moment, my code is displaying the second group below the first group to the left. This is how it curr ...

htmlbootstrap-5

Can anyone suggest a method for adding comments and improving the organization of a bower.json file?

Managing a large project with numerous bower dependencies can be challenging. It's often unclear whether these dependencies are still being used or if the specified versions are necessary for a reason. It would be ideal to have the ability to add comm ...

javascriptjsonbower

Execute a zoom out action by pressing the (Ctrl) and (-) keys simultaneously in Javascript

I'm trying to figure out how to simulate a Ctrl - zoom out using Javascript. I've noticed that using the style zoom property or the transform property gives different results with white space in the corners, rather than the smooth zoom out effect ...

javascriptjqueryhtmlcss

Using varied colors to style list items

Is there a way to apply three different colors to my list items? What is the best method for achieving this? This is what I have in my code: li { width: 33.333%; float: left; padding: 15px; list-style: none; } .light { background-color: #0 ...

htmlcss

Develop a table with dynamic features in Angular according to the number of rows selected from a dropdown menu

I am currently exploring AngularJS 1.6 and tackling the challenge of dynamically populating a table with rows based on the number selected in a dropdown list, ranging from 1 to 12. Here's the code I have up until now: <body ng-controller="myContr ...

javascriptangularjs

Displaying subtotal in a list using Vue.js and conditional rendering with v-if statement

Seeking guidance on calculating a total for a vue.js list that contains invoice items. To illustrate, let's consider a scenario where a table of invoice items is being rendered. Here is the code snippet: <table> <template v-for="(invoice_ite ...

javascriptvue.jsvuejs2

Creating dynamic components in Vue.js using VueJS and jQuery synergistically

New to Vue.js and in the process of building a Vue component inspired by this custom select menu. I want to include an ionicon with each list item. Typically, I can add the icon in Vue.js using: <component class="icon" :is="name-of-icon& ...

javascriptjqueryvue.jsvuejs3

"Make sure to specify Safari input field as an email and mark

I am experiencing an issue with a contact form in my HTML/PHP code. Everything seems to be working fine, but when using the SAFARI browser, the form fails to validate if I try to submit without filling out all input fields. For example, my form includes: ...

javascriptphphtmlsafari

changing button text in ajax upon successful completion

I am looking to update the button text upon successful completion. Specifically, I would like to change it to "accepted" after a successful response. <button type="button" onclick="saveData<?php echo $row1->id; ?>()">Accept</button> ...

javascriptphpajax