Search code examples
javascripthtmlhoverpopover

Problem setting attribute in JS with popover data-toggle

I am trying to display content when hovering over an icon. When I hardcode it in my HTML it works fine. But when I try to render the same thing through javascript, nothing happens on hover.

So this works when written in HTML directly:

<i id="iconid"
class="ki flaticon2-information icon-lg ml-3 text-dark"
data-container="body" 
    data-toggle="popover" 
    data-html="true"
data-content="hello"i>

This does not work

    <!--html-->
    <i id="iconid"
class="ki flaticon2-information icon-lg ml-3 text-dark"
data-container="body" 
    data-toggle="popover" 
    data-html="true"
i>

<!--javascript-->
document.getElementById("iconid").setAttribute("data-content", "hello");

When I inspect the rendered code, everthing seems exactly the same in both cases, but in 2nd case nothing happens on hover.

Thanks for any help!

Solution

  • If you use bootstrap, you might want to call popover event manually after manipulating element by JS.

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

    I think issue is, by the time you call your JS manipulation, bootstrap already finished binding events for the elements. So it got left behind.