2013-09-04 2 views
3

Использование Bootstrap popover, popover не отображается при наведении указателя мыши. Он появляется только при нажатии ссылки. Я ценю любую помощь. ТИАPopover не отображается при зависании

<script type="text/javascript"> 
    $(function() { 
     $('body').popover({ 
      html: true, 
      content: function() { 
       return $(this).next().html(); 
      }, 
      selector: '.has-popover' 
     }) 
    }); 
</script> 

<body> 
<form id="form1" runat="server"> 
    <div id="div1" style="margin: 80px 0 0 20px;" runat="server"> 
     <a id="A1" style="text-decoration-style: dashed; text-decoration: dashed;" class="has-popover" href="#" rel="popover" data-placement="right" data-original-title="Title Goes Here!" data-trigger="hover">Hover for popover</a> 
     <div id="Div3" style="display: none"> 
      <div style="float: left; width: 15%;"> 
       <img style="max-height: 75px; max-width: 75px;" src="style/x.png" /> 
      </div> 
      <div style="float: left; width: 85%;"> 
       <ul> 
        <li>blah blah blah</li> 
        <li>yada yada yada</li> 
        <li>blah blah blah</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</form> 

ответ

3

По умолчанию пирог запускается click, не hover.

Вы можете изменить его, добавив параметр:

trigger: 'hover'

Так что ваш скрипт должен выглядеть следующим образом:

<script type="text/javascript"> 
    $(function() { 
     $('body').popover({ 
      html: true, 
      content: function() { 
       return $(this).next().html(); 
      }, 
      selector: '.has-popover', 
      trigger: 'hover' // Add this option 
     }) 
    }); 
</script> 
+0

Интересно. Однако, похоже, проблема с зависанием устранена, теперь html не отображается в popover; Я получаю только титул. – brad

+0

@brad использовать атрибут 'data-content =" example text "' в вашем элементе popover. Я тестировал его здесь, и он отображается правильно: [jsfiddle] (http://jsfiddle.net/j2uUz/1/) – Wilq

0

Pass trigger как вариант поповер:

$('body').popover({ 
      html: true, 
      content: function() { 
       return $(this).next().html(); 
      }, 
      selector: '.has-popover', 
      trigger: 'hover' 
}) 
0

Ниже приведен рабочий пример:

http://jsfiddle.net/2DAZ2/43/

также проверить это проблема с с "пирог" селектором

Так что вам нужно передать дополнительный параметр в момент инициации

https://github.com/twbs/bootstrap/issues/4990

$('body').popover({ 
      html: true, 
      content: function() { 
       return $(this).next().html(); 
      }, 
      selector: '.has-popover', 
      trigger: 'hover' 
}) 
Смежные вопросы