Question

78

How to trigger a bootstrap popover on mouseover event

rated 0 times [ 84] [ 6] / answers: 1 / hits: 8504 / 10 Years ago, thu, january 22, 2015, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tyemathewj

Add To Favorites

Follow

Total Points: 484

Total Questions: 107

Total Answers: 111

Location: Equatorial Guinea

Member since Sun, Feb 14, 2021

3 Years ago

answered 10 Years ago louiemarvinm · Accepted Answer

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);

    }

});