Search code examples
javascriptjquerytwitter-bootstrapbootstrap-4popover

Store data-content of popover in variable

I am trying to build a search engine for my website and I need to store to data-content of the popovers in a variable so that I can search for them afterwards.

I already tried this:

var popover = $('.companyRoster').data('bs.popover');
popover.getContent();

but it is not working, as expected..

An example of my html containing the popover will be:

<div id="companyRoster" class="companyRoster container">
  <div class="row mb-2">
    <div class="col-lg-1 col-md-2 col-sm-3 col-6">
        <img src="images/john-doe.jpg" alt="..." class="img-fluid rounded-circle padding-0" data-toggle="popover" title="John Doe" data-placement="top" data-content='<b>Position:</b> Team Leader Integration Services <br> <b>Department:</b> IT <br> <b>Email:</b> <a href="mailto:some.email@aaa.aa">some.email@aaa.aa</a> <br> <b>Skype:</b> <a href="skype:johndoe?userinfo">johndoe</a>'>
    </div>
  </div>
</div>

Can you tell me how can I make console.log() to display the data-content of the popover?

Solution

  • You're looking in the '#companyRoster' element for the data, which that element doesn't have. The data-content is in one of the child elements.

    You should be able to get the data-content like so:

    var dataContent = $(".img-fluid").data('content');
document.getElementById('other_div').innerHTML = dataContent;

    I hope this helps!