【问题标题】:Prevent showing tooltip on popover防止在弹出框上显示工具提示
【发布时间】:2015-03-09 20:24:46
【问题描述】:

我需要 标签,它应该在光标移动时显示工具提示,并且应该在点击时放下弹出框。但是当我将光标移到弹出框上方时,也会显示工具提示。检查它:https://jsfiddle.net/ivictbor/re15cuby/2/

HTML:

 <span data-toggle="tooltip" data-placement="bottom" title="sometext"> 
    <a id="my_uniq_id" href="javascript:void(0);" >          
        link</a>
   </span>

JS:

$( "#my_uniq_id" ).on( "click", function drop_popover() {
 id = 'my_uniq_id'
 var el = $("#"+id);
 $( "body" ).append(
        '<div id="' +id+'_hldr'+'" style="display: none;">'+
          'popover holder code'+
        '</div>'
 );
 el.popover({ 
        placement : 'bottom',
        html : true,
        trigger: 'manual',
        title: ': <a href="#" style="float:right;"><span class="glyphicon glyphicon-remove-circle" '+
        'onclick="$(\'#'+id+'\').popover(\'hide\');"></span></a>',
        content: function() {
          return $('#'+id+'_hldr').html();
        },
    }).click(function(e) {
        e.preventDefault();
    });
    el.popover('show');
})

$(function () {
  $('[data-toggle="tooltip"]').tooltip({html: true})
})

【问题讨论】:

标签: twitter-bootstrap twitter-bootstrap-3 tooltip popover


【解决方案1】:

这应该可以解决问题:

 $('[data-toggle="tooltip"]').tooltip({html: true}).on('click', function(){
            $(this).tooltip('hide');
        });

【讨论】:

    【解决方案2】:

    需要在popover选项中添加'container:'body'':

    el.popover({ 
        placement : 'bottom',
        container: 'body',
        html : true,
    

    感谢 cvrebert

    【讨论】:

    • 再解释一下:默认情况下,弹出框的 DOM 被附加为其&lt;a id="my_uniq_id"&gt; 触发器元素的兄弟元素,这意味着它也是您的&lt;span data-toggle="tooltip" ...&gt; 的子元素。因此,弹出框在工具提示的触发器内!另一方面,container: 'body' 使弹出框被附加到 &lt;body&gt; 上。权衡的是,现在如果您滚动页面,弹出框将不再“粘”在其触发器上。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-08-12
    • 1970-01-01
    • 1970-01-01
    • 2012-04-08
    • 2017-02-08
    • 1970-01-01
    相关资源
    最近更新 更多