Parc Roi Parc Roi - 2 months ago 22
HTML Question

Create dynamic popover from function

I'm working on translation social network, and in the posts I need to show some stats about votes for each suggestions (similar to answers in stackoverflow), so I need to create popover whenever the user hover on the label with dynamic content.



function Popx(id)
{
$(id).popover({//here is my problem, I want dynamic id not static
html: true,
trigger: 'hover',
content: function () {
return $.ajax({url: 'ajax/ajaxpopoverstat.php?uid=1',
dataType: 'html',
async: false}).responseText;
}
}).hover(function (e) {
$(this).popover('toggle');
});
}

<div class="label label-default" style="background-color: orange; font-size: x-large" data-poload="ajax/ajaxpopoverstat.php" id="xword" onmouseover="Popx(this.id)">Suggested Word</div>





any help?

Answer

Based on the trigger you have in your popover function I am guessing you just want the popover to react to an element, and you don't necessarily want it in a function. If I am correct then this JSFIDDLE example should do exactly what you need

$(document).ready(function(){
    $('div.label').popover({ //here is my problem, I want dynamic id not static
      html: true,
      trigger: 'hover',
      content: function() {
        return "Skittles and ids of: " + $(this)[0].id;
      }
    }).hover(function(e) {
      $(this).popover('toggle');
    });
});

Also in this updated fiddle I get your popover to toggle correctly: Updated Fiddle