javascript - How to trigger a bootstrap popover on mouseover event - Stack Overflow

admin管理员组

文章数量:1326461

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>/</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 /

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=".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?

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./</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/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/wikipedia/mons/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?

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Jan 22, 2015 at 21:27 user1592380 asked Jan 22, 2015 at 16:11 user1592380user1592380 36.4k105105 gold badges312312 silver badges551551 bronze badges 3

• shouldnt it be $('.popover-markup > .trigger') like in the jsfiddle? – Mario A Commented Jan 22, 2015 at 16:35
• That doesn't work either. – user1592380 Commented Jan 22, 2015 at 17:05
• 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 Commented Jan 26, 2015 at 17:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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>" bees 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" mand. 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");
    }
});

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./bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn./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>

本文标签： javascriptHow to trigger a bootstrap popover on mouseover eventStack Overflow