Embedding a table inside a Bootstrap popover

I'm struggling with adding a table inside a Bootstrap popover. When I click on it, the table doesn't show up. This is my first time trying to insert HTML into a popover, so I don't know the correct way to do it. Any help would be appreciated. Thank you!

$(function(){
    $("[data-toggle=popover]").popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});
 <a role="button" class="btn btn-link btn-item black-text" data-toggle="popover" data-trigger="focus" data-placement="top" title="Currency Converter" data-content="Displayed rates are only for informational purposes and do not reflect on the actual rates you may be charged by the financial institution handling your transaction.
<table class='table table-condensed table-bordered'>
<tr><td>Euro</td><td>€79,123</td></tr>
<tr><td>GB Pound</td><td>£46,536</td></tr>
<tr><td>AU $</td><td>$123,456</td></tr>
</table>LLC accepts payment in US Dollars only. Rates do not include taxes, duties, shipping, insurance, or any other expenses associated with the purchase."><i class="fa fa-exchange"></i> Currency converter</a>

javascripttwitter-bootstrappopover

Answer №1

I found a solution that worked for me:

$(function() {
    $.fn.tooltip.Constructor.Default.whiteList.table = [];
    $.fn.tooltip.Constructor.Default.whiteList.tr = [];
    $.fn.tooltip.Constructor.Default.whiteList.td = [];
    $.fn.tooltip.Constructor.Default.whiteList.div = [];
    $.fn.tooltip.Constructor.Default.whiteList.tbody = [];
    $.fn.tooltip.Constructor.Default.whiteList.thead = [];

    $('[data-toggle="tooltip"]').tooltip({
        html: true,
        container: 'body'
    })
})

Answer №2

Here is an example that uses a table in a popover along with a toggle button: http://jsfiddle.net/z824fn6b/320/

<a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a1" data-placement="right">Popover Example</a>
<div id="a1" class="hidden">
  <div class="popover-heading">Title <span style="float:right;cursor:pointer;" class="fa fa-times" data-toggle="popover"></span></div>
  <div class="popover-body">
    <table style="width:100%">
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
    </table>
  </div>
</div>


$(function() {
  $("[data-toggle=popover]").popover({
    html: true,
    content: function() {
      var content = $(this).attr("data-popover-content");
      return $(content).children(".popover-body").html();
    },
    title: function() {
      var title = $(this).attr("data-popover-content");
      return $(title).children(".popover-heading").html();
    }
  });
});

Answer №3

Take a look at this example for guidance:

HTML structure:

<div id="myContent">
<table border="1" style="width:100%">
    <tr>
        <td>Amy</td>
        <td>Brown</td>
        <td>60</td>
    </tr>
    <tr>
        <td>Mark</td>
        <td>Miller</td>
        <td>72</td>
    </tr>
    <tr>
        <td>Sarah</td>
        <td>Clark</td>
        <td>88</td>
    </tr>
</table>

jQuery functionality:

$('[data-toggle=popover]').popover({

   content: $('#myContent').html(),
   html: true

}).click(function() {
   $(this).popover('show');
});

See it in action on jsFiddle: http://jsfiddle.net/39rwkzqL/8/

Answer №4

My approach is outlined below:

XHTML:

<div class="span12" style="margin-top: 150px;width:100%">
   <a tabindex="0" role="button" data-trigger="focus" class="btn-sm btn-info" data-placement="top" id="commentPopover"><i class="fa fa-comments" ></i> View</a>
   <!-- Popover 2 hidden content -->
   <div id="commentPopoverHiddenContent" style="display: none">
      <div>
         <table border="1" style="width:100%">
            <tr>
               <th width="30%">Comment date</th>
               <th width="70%">Comment</th>
            </tr>
            <tr>
               <td>12/03/2015 16:45</td>
               <td>*Username - Testing1</td>
            </tr>
            <tr>
               <td>12/03/2015 16:55</td>
               <td>*Username - Testing2</td>
            </tr>
            <tr>
               <td>12/03/2015 17:13</td>
               <td>*Username - Testing3</td>
            </tr>
         </table>
      </div>
   </div>
   <!-- Popover 2 hidden title -->
   <div id="commentPopoverHiddenTitle" style="display: none">
      Error comments
   </div>
 </div>

Javascript:

$(function(){
// Enabling Popover Example 2 - JS (hidden content and title capturing)
$("#commentPopover").popover({
    html : true, 
    content: function() {
      return $('#commentPopoverHiddenContent').html();
    },
    title: function() {
      return $('#commentPopoverHiddenTitle').html();
    }
});
});

Take a look at the demo here: http://jsfiddle.net/5bsykcqt/

Answer №5

Illustrating with the most recent Bootstrap v5.3, here is a demo featuring the utilization of the <table> element within a Popovers:

document.addEventListener('DOMContentLoaded', function () {
      const allowList = bootstrap.Tooltip.Default.allowList;
      allowList.table = [];
      allowList.thead = [];
      allowList.tbody = [];
      allowList.tr    = [];
      allowList.th    = [];
      allowList.td    = [];
  });
document.querySelectorAll('[data-bs-toggle="popover"]').forEach(popover => {new bootstrap.Popover(popover, {html: true})});
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a6ababb0b7b0b6a5b484f1eaf7eaf6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbb9b4b4afa8afa9baab9beef5e8f5e9">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="
<p>And here's some amazing content with<br/>line break.</p>
<ul>
  <li>Unordered Item 1</li>
  <li>Unordered Item 2</li>
</ul>
<table class='table table-sm table-bordered'>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
It's very engaging. Right?
">Click to toggle popover</button>

Answer №6

When working with CSS3, there is a more streamlined approach available: utilize the display attributes below to mimic table-like behavior

.popover_container{
    display: table;
}
.popover_row{
    display: table-row;
}
.popover_column1{
    display: table-cell;
    text-align: left;
}
.popover_column2{
    display: table-cell;
    text-align: left;
}

From there, you can construct the popover content

$popover_content = "<div class='popover_container'>
                       <div class='popover_row'>
                           <div class='popover_column1'></div>
                           <div class='popover_column2'></div>
                       </div>  
                    </div>";

Finally, integrate it into your HTML code as shown below

echo ('<span class="material-symbols-outlined" data-bs-html="true" data-bs-toggle="popover" data-bs-trigger="hover" title="your titile" data-bs-content="'.$popover_content.'">youricon</span>')

Answer №7

After struggling to find a solution and realizing the existing answers were outdated, I stumbled upon this workaround:

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

As referenced near the end of this page: Bootstrap 5 Documentation You have the option to customize your own sanitize function, ensuring that no content is removed if you simply return what was provided. Voilà!

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

Storing sound recordings with GridFS

I am currently facing an issue with the following code, it is only working partially and I require assistance in fixing it. The function saveAudioToGridFS() should return a file ID to its calling function. Despite verifying that the value to be returned ...

javascriptmongodbexpressgridfsgridfs-stream

The ng-token-auth plugin in combination with the ui-router resolver leads to a blank

I have been referring to the ng-token-auth documentation here in an attempt to implement a resolver for authentication using the validateUser function. However, when I add the code snippet provided in the documentation to my app.js file under the "home" st ...

javascriptruby-on-railsangularjs

Issue with Angular 2: scrolling event not triggering

Just starting out with Angular 2 and I'm trying to implement infinite scrolling for fetching data using REST API calls. Initially, I make a call like this to get the first set of 50 records: localhost:8080/myapp/records=items&offset=0&limit=5 ...

javascriptangular

Monitor Changes with Grunt: Be Prepared for Some Waiting!

My Grunt watch task is experiencing significant delays between detecting a file change and starting to work. Output similar to the following is frequently seen: >> File "src/static/app/brandManager/addChannel.html" changed. Running "html2js:main" ...

javascriptgruntjsgrunt-contrib-watch

Unable to extract property from object in context due to its undefined status

Having trouble with the useContext hook in my React app for managing the cart state. Keep getting an error stating that the function I'm trying to destructure is undefined. I'm new to using the context API and have tried various solutions like e ...

javascripthtmlreactjsreact-hooks

Can a shape similar to an inverted circle be created using CSS and jQuery?

I'm stumped on how to create an inverted circle in the corners. I've included a picture for reference. https://i.stack.imgur.com/jeNdh.jpg Is it feasible to achieve this effect using CSS3 or maybe jQuery? ...

javascriptjquerycsscss-shapes

Processing ajax requests in Rails 4 using HTML format

I'm currently in the process of setting up ajax functionality for my contact form and I am currently testing to ensure that the ajax call is being made. When checking my console, I noticed that it is still being processed as HTML and I cannot seem to ...

javascriptjqueryruby-on-railsajax

Update the object with fresh data once the XML data is transformed into JSON format

I am currently converting XML attributes into JSON format. Below is the complete function that I will explain step by step: request.execute('[someSP].[spSomeSP]', function(err, dataset) { if (err) { reject(err); } ...

javascriptjsonxmlnode.js

Having trouble with Bootstrap 4 card image alignment within a tab panel

Encountering a challenge with nav-tabs nested within a card on a Bootstrap 4 webpage. My goal is to switch both the card text and the card-img-bottom simultaneously when toggling between nav-link options. To achieve this, I'm using a tab-pane that inc ...

htmlcsstwitter-bootstrapbootstrap-4vertical-alignment

Error: The property 'open' is not defined in the mdMenu object

Encountered a bug while working with angular-material design... When using md-menu, if a sub menu item is opened (as shown in the image) and then hovering over a non-subMenu item (menu item), it throws an error "Cannot read property 'open' of nul ...

javascriptangularjsangular-materialmean-stack

Building a Dynamic Web App with PHP and Vue.js

I developed an API using PHP and you can access it through this link: However, I encountered an issue when trying to display the data on the front-end of my Vue.js (Home.vue) file using axios. Below is the code I used: <ul class="ta-track-list" v-if= ...

javascriptphphtmlvue.js

Troubleshooting problems with dropdown binding in Knockout ObservableArray

I am encountering an issue with fetching data from a restful wcf service during page load and binding it to a dropdown, which is not functioning as expected. function CreateItem(name, value) { var self = this; self.itemNam ...

javascriptdata-bindingknockout.js

How can VueJS dynamically incorporate form components within a nested v-for loop?

I've encountered a challenge while working on my project. Here is the form I'm currently using: https://i.sstatic.net/LyynY.png Upon clicking the 'New Deal Section' button, a new section like this one is created: https://i.sstatic.n ...

javascriptvue.js

React - Issue with state not being updated accurately

My current project involves using the <Select> component from Material-ui to create a drop-down menu. I need to update the state of the <Select> component after a selection has been made. To achieve this, I have set the value property of the & ...

javascriptreactjs

Every file downloaded through the iframe is automatically stored in a designated server folder

Is it possible for my website to have an iframe that enables users to browse the web, and when they click on a download button on any external website, the file can be saved directly to a specific folder on my server instead of their own computer? I'm ...

javascriptphphtml

Adjust the href link value when a new option is selected

I currently have a select element displayed below. Next to it, there is a link that sets the eID value to a session value. However, I want this value to be updated dynamically whenever a different eID value is selected from the dropdown. Although I can r ...

javascriptphp

Having trouble getting the `transformItems` feature in React InstantSearch RefinementList to

I recently integrated the React InstantSearch library into my app and I'm working on customizing the refinement list to display only relevant filters for the active user. I attempted the following code: <RefinementList attributeName="organization" ...

javascriptreactjsalgoliareact-instantsearch

What is the most efficient way to transfer form data from one JSP page to another?

I need to transfer information from one webpage (1.jsp) to another webpage (2.jsp). The data that needs to be transferred includes checkboxes, radio buttons, and drop downs. This data will be used in 2.jsp to generate the appropriate page. Is there a way ...

javascriptformsjsp

No action detected following the import into Redux form

This is my very first project in React. After completing a training course on Udemy, I have reached the following code but am stuck trying to integrate the action into the container (Is Container correct?). Here is the code I have put together from variou ...

javascriptreactjsredux

Symfony2: Making AJAX request that unexpectedly returns complete html page

I am facing an issue with setting up a basic AJAX request in Symfony2. It appears that the controller is not receiving the request as expected. Instead of displaying '123', the AJAX response shows the HTML content of the current page (index.html. ...

javascriptphpjqueryajaxsymfony