Skip to main content

bootstrap-popper not allowing html table

 

Objective : 

    Creating popover with html using bootstrap-popover.js

Technology: 

  • Bootstrap version - 4.6.1
  • Popper - 1.16.1
  • Jquery - 3.5.1

Challenge:

    1. basic syntax for popover
<button type="button" class="btn btn-lg btn-success" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
    $(function () {
        $('[data-toggle="popover"]').popover();
    });
   2. Put html to that popover syntax

<button type="button" class="btn btn-lg btn-success" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
    $(function () {
          $('button[data-toggle="popover"]').popover({
                html: true,
                title: 'title',
                content: function () {
                  var billId = $(this).data('id');
                  return $('#bill-content-' + billId).html();
                }
            });
     });
Explanation:
    In first syntax you can see popover text placed in `data-content` attribute. But, If we need to put html content in this popover we need to follow second syntax.

But, Here is the challenge, I couldn't popover table element using second syntax. Than i searched AI tools perplexity and claude both were suggested use table tag. But, popover not shown that table. Than i decided to made table using `div` tag like below.
    .discount-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 1px;
      margin: 20px auto;
      border-collapse: collapse;
      width: 100%;
      max-width: 800px;
      background: #ccc; /* For cell borders via gap */
      font-size: 8px;
    }
    
    .grid-header,
    .grid-cell {
      background: #fff;
      padding: 5px;
      text-align: center;
      border: 1px solid #ddd;
    }
    
    .grid-header {
      font-weight: bold;
      background-color: #EFF7F0;
    }       <div id="bill-content-1">
          <div class="discount-grid">
          <!-- Header Row -->
          <div class="grid-header"></div>
          <div class="grid-header">Girls</div>
          <div class="grid-header">Boys</div>        
          <!-- Actual Row -->
          <div class="grid-cell">Actual</div>
          <div class="grid-cell">₹1,200.00</div>
          <div class="grid-cell">₹1,800.00</div>
       </div>

Now  it showing table. But next challenge - it not showing full width of table. I solved this issue by increasing popover width and decreasing text font-size. 
.popover{max-width: 400px;} .discount-grid {font-size: 8px;}
Now it appears clearly in mobile and computer. There another problem came if i want to close the popover I just clicked that button again. But, it worked in computer due to big screen it not hide that button it hided in mobile. Than i decided to create custom button within the popover to close that popover. 

       <div id="bill-content-1">     <div class='closeBtn' id='times-1'><i class='fa fa-times'></i></div>     <div class="discount-grid"></div>         </div>       $(function () { $('button[data-toggle="popover"]').popover({ html: true, title: 'title', trigger: 'manual', content: function () { var billId = $(this).data('id'); return $('#bill-content-' + billId).html(); } }); }); $(document).on('click','.closeBtn',function(){ let id = $(this).attr("id").split(/[- ]+/); $('button[data-id='+id[1]+']').popover('hide'); }); $('button[data-toggle="popover"]').on('click', function () { $(this).popover('show') });

Once i changed manul trigger and created event for that closing button it worked seamlesly.
Labels:

Comments

Post a Comment

Popular posts from this blog

PHP can run AI models - no need Python

 Objective:     Run AI models only using php. Now this is possible with  https://github.com/CodeWithKyrian/transformers-php  this library. I have tried object detection and question answering using this library. Technology:       1.  PHP 8.2 Initialization:     Guide -  https://transformers.codewithkyrian.com/getting-started 1. Initialize project by composer init cmd. 2. Install transformer library by  composer require codewithkyrian/transformers cmd. 3. Enable ffi extention in php.ini       extension = ffi      ffi.enable = true 4. Enable opcache      opcache.jit = tracing 5. Increase memory limit      memory_limit = 512M I. Object detection: ( https://transformers.codewithkyrian.com/object-detection )     Object detection can improve web application perspective . Example:  Retail applications can speed up checkout by automatically recognizing ...
Post a Comment
Read more

From C to Assembly: Blinking an LED the Hard Way

  From C to Assembly: Blinking an LED the Hard Way ~4 hours of digging, one blinking LED, and a much better mental model of what "compiling" actually means. The Inspiration I've been programming since 2017 — variables, control flow, HTTP, web apps, the usual path. But I kept coming back to something Linus Torvalds said: that the compiler writes 100% of the code. I wanted to actually understand what that meant before taking it for granted. So I went looking for the layer beneath the code I usually write: binary → hexadecimal opcodes → assembly → C. I wanted to see the whole stack, not just use the top of it. What I Tried I already knew my way around the Arduino IDE for uploading compiled sketches. While researching, I found out you could write raw hex machine code directly for the Arduino — but the resources I found were too dense to follow. So I stepped back one level, to assembly. Searching further, I found a YouTube channel with an Arduino-assembly series. I copi...
Post a Comment
Read more

IVR or SMS based navigation for smart phone not education equipped people

Problem statement:    On Thursday morning (16-10-2025) i went for walking near Perungudi in chennai. There, i was saw a truck driver he notes the address and has some navigation landmarks. But, he hesitate to follow the navigation due to every day development of chennai. He asked me if you know this location. I said , i don't know but, you may follow the map. He said I have dial pad phone no map in it. So, I was traveled with the track to reach the place used by google map. Then , I realised many Indian old people causing this problem and some poor internet place also. Solution:    If some one know where they are or say some landmark through mobile like 198 (AI). It should say their location on voice call and if they want navigation to some places it should create session with say the navigation tips. It will recall them to ensure they are going correct path. Predictable problems:    1. Voice call or sms not encrypted it may tab by middle one to give wrong ...
Post a Comment
Read more