Show popover upon hover on an icon in a datatable

Question

I generate my datatable in an .ashx file:

(...)
//E.g. This is how I generate an icon which I put into one of the table cells
 comment = "<i class=\"fa fa-info\" id=\"popoverData\"aria-hidden=\"true\" data-placement=\"bottom\" data-original-title=\"Comments\" data-content=\"" + comments_text + "\"></i>";
(...)
var data = JsonConvert.SerializeObject(data);
var columns = JsonConvert.SerializeObject(columns);
context.Response.Write("{\"data\":" + data + ",\"columns\":" + columns + "}");

The goal is to show a bootstrap popover upon hover on the above icon. My JavaScript:

    $(document).ready(function (){
       //this part should generate the bootstrap popover, but it's NOT
       $('#MyDataTable').on('mouseover', '#popoverData', function () {
         $('#popoverData').popover();
         //console log gets activated
         console.log("I am in the function");
     });
    getData();
    });

   function getData() {
     $('#MyDataTableDiv').html('<table id="MyDataTable" class="display" cellspacing="0" width="100%"></table>');

     $.ajax({
     "url": myUrl/getData.ashx',
     "success": function (json) {
        json.columnDefs = [
            { targets: '_all', defaultContent: "" },
            { targets: '_all', className: 'dt-body-left' }
        ];
        json.dom = 'Bfrtip';
        json.buttons = ['print', 'csv', 'copy'];

        $('#MyDataTable').dataTable(json);

    },
    "dataType": "json"
});
}

The javascript mouseover event gets triggered, but the popover is not working. I've tried this too:

      $(document).ready(function (){
        $('#popoverData').popover();
        getData();
      });

But in this case the popover shows up ONLY if the #popoverData element is outside the datatable.

How do I show popover upon hover on the icon?

are you generating `popoverData` element dynamically? – Swanand Dec 08 '17 at 12:36 — Swanand, Dec 08 '17 at 12:36
@Swanand Yes, with an .ashx handler. – JerryBox Dec 08 '17 at 12:38 — JerryBox, Dec 08 '17 at 12:38

score 1 · Accepted Answer · answered Dec 08 '17 at 12:50

1

Please modify your code.

   $('#MyDataTable').on('mouseover', '#popoverData', function () {
     $(this).popover('show');
 });

if this not worked then try

$(document).on('mouseover', '#popoverData', function () {
$(this).popover('show'); 
});

answered Dec 08 '17 at 12:50

Swanand

489
1
6
25

You are the champion! If you have time, why did using `this` instead of `#popoverData` made such a big difference? – JerryBox Dec 08 '17 at 12:53
Actually, We use `on` method to handle events of dynamically generated elements. You will get more info here: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Swanand Dec 08 '17 at 12:55
Thanks Man. Glad to help you. Enjoy jQuery – Swanand Dec 08 '17 at 12:55

Show popover upon hover on an icon in a datatable

1 Answers1