How to trigger a bootstrap popover on mouseover event

Question

I have a html table with a row that looks like:

<tr>
    <td><input type="checkbox" name="check[]" value="265"></td>   
    <td>265</td>
    <td>NO MATCH</td>
    <td>http://stackoverflow.com/</td>
    <td>No</td>
    <td>0</td>
    <td>f79a8316891</td>
  </tr>

I am trying to build a jquery function that will open up a bootstrap 2.32 popover if I pass it over a URL in table cell. So far I have:

    $("[data-bind='popover']").popover({
         trigger: 'hover',
         html: true,
         content: function(){ 
          return $(this).data('content');
         }
        });



        $('td').on('mouseover', function(e) {
            var contents = $( this ).html() ;

            if (contents.match("^http")) {
                console.log(contents);

                 this.innerHTML = '<a href="myreference.html" data-bind="popover"' + ' data-content="'+contents +'"> link </a>';
                 console.log(this.innerHTML);

            }
        });

The popover portion of this is based on http://jsfiddle.net/8DP4T/1/

When I mouseover a url in the table it forms a popover link as expected. However as I hold the mouse over it no popup occurs as far as I can see. The code does work , but it is not triggering the popover.

Interestingly , I have also placed

<a href="myreference.html" data-bind="popover data-content="http://upload.wikimedia.org/wikipedia/commons/a/a5/Flower_poster_2.jpg">Brick</a>

below my table and this is working with a popover created. I'm wondering if this behavior has something to do with the order of operations because the popover link is created dynamically after the DOM is already set. Can someone advise me here?

shouldnt it be `$('.popover-markup > .trigger')` like in the jsfiddle? — Mario A, Jan 22 '15 at 16:35
You never initialize the anchor you generate into that table cell, for it to work you have to initialize it like the other one. — P Varga, Jan 26 '15 at 17:29

score 3 · Answer 1 · answered Jan 22 '15 at 17:04

You need to add

trigger: 'hover'

to the options object as below:

$('.popover-markup > .trigger').popover({
        html : true,
        title: function() {
          return $(this).parent().find('.head').html();
        },
        content: function() {
          return $(this).parent().find('.content').html();
        },
        container: 'body',
        placement: 'bottom',
        trigger: 'hover'
    });

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>


<div class="popover-markup">
  <a href="#" class="trigger">
    This link triggers the popover.
  </a>
  <div class="head hide">
    This is the popover title.
   </div>
  <div class="content hide">
    <p>This is the popover content.</p>
  </div>
</div>

No popover is occurring at all whether I hover over the link or click it. — user1592380, Jan 22 '15 at 17:24

jake_nerdnest · Accepted Answer · 2015-01-22T17:40:19.143

The default trigger for a bootstrap popover is a 'click' event. What you've defined here is "On mouseover, check to see if the content under my mouse is a link, and if so, define a popover", but your problem is that you never triggered the popover to open, you just defined it so that if it's click it'll open.

Change this...

$('.popover-markup').popover(...)

To this...

$(this).popover(...)

So that the "<td>" becomes the popover (I'm not 100% certain you can define a <td> as a popover, but it seems like it should work). Then, immediately after your code that defines the popover options, you can trigger a "click" event, or you can trigger it to open by sending the "show" command. Finally, you can trigger it to open by adding "trigger":"hover" to your options list when defining the popover... which will auto-hide it after the user is no longer hovering over the td element.

//Trigger click
$(this).trigger("click");

//Trigger popover open (probably the better way)
$(this).popover("show");

//Trigger on hover
$(this).popover({
    ...
    trigger: 'hover',
});

So in all...

$('td').on('mouseover', function(e) {
     var contents = $( this ).html() ;

    if (contents.match("^http")) {
       $(this).popover({
            html : true,
            title: function() {
              return $(this).parent().find('.head').html();
            },
            content: function() {
              return $(this).parent().find('.content').html();
            },
            container: 'body',
            placement: 'bottom'
        });

        // Trigger the popover to open
        $(this).popover("show");
    }
});

Thank you, I'm going to have to come back to this question. I realized that the popover is not working at all either by clicking or hovering. — user1592380, Jan 22 '15 at 18:04
I have gotten the popover working with bootstrap 2.32 , and I have modified the question using your advice on how to approach this. — user1592380, Jan 22 '15 at 21:29
I think you are on the right track here so I'm going to accept your answer but there are some issues regarding dynamically created popovers. - http://stackoverflow.com/questions/11947094/twitter-bootstrap-popovers-not-working-for-dynamically-generated-content?rq=1 — user1592380, Jan 23 '15 at 15:06

How to trigger a bootstrap popover on mouseover event

2 Answers2