Bootstrap Popover - JS触发器

我试图用JS触发Bootstrap的Pop Over。Bootstrap Popover - JS触发器

我希望能够更改相对于单击链接的消息和标题。

它的工作原理，如果我实际上点击链接，但我想通过JQuery的.Click事件实现这一点。

这是我目前的JS代码： //全球工具提示功能

$(function() { 
    $(".tool-tip").on("click",function() { 
     //Initializes Tooltip 
     $(function() { 
      $("#ToolTipContainer").popover(); 
     }); 
     var title = $(this).attr("data-tooltip-title"), 
      message = $(this).attr("data-tooltip-message"); 
     $("#ToolTipContainer").attr("title", title); 
     $("#ToolTipContainer").attr("data-content", message); 
     $("#ToolTipContainer").click(); 
    }); 
});

这里是我的DOM元素我是从调用函数：

<button type="button" class="tool-tip btn btn-default" data-dismiss="modal" data-tooltip-title="Item Added" data-tooltip-message="Some Message">Continue Shopping</button>

这里是弹出容器（ css隐藏了这个，我只想看弹出）：

<a href="#" id="ToolTipContainer" data-toggle="popover" data-trigger="focus" data-placement="bottom" title="" data-content=""></a>

引导文件：Bootstrap PopOver

来源

2015-06-01 Mark

是否有原因为什么'$（“＃ToolTipContainer”）。popover（'show'）'不起作用？（其中，顺便说一句，在你的链接文档页面解释） – Ted

你可以通过调用

.popover（“秀”）

$(function() { 
    $(".tool-tip").on("click",function() { 
     //Initializes Tooltip 
     $(function() { 
      $("#ToolTipContainer").popover(); 
     }); 
     var title = $(this).attr("data-tooltip-title"), 
      message = $(this).attr("data-tooltip-message"); 
     $("#ToolTipContainer").attr("title", title); 
     $("#ToolTipContainer").attr("data-content", message); 
     $("#ToolTipContainer").popover('show'); 
    }); 
});

编程显示工具提示尽量不要躲在酥料饼的容器为好，这是最有可能的藏身你的popover。

来源

2015-06-01 16:11:05

任何想法如何将其设置为自动隐藏？ – Mark

@Mark：它只是通过“隐藏”而不是“显示”的过程。在你的点击处理程序结束时，你可以添加一个setTimeout（function（）{$（'＃ToolTipContainer'）。popover（'hide'）;}，10000）;例如在显示10秒后隐藏它。 –

Bootstrap Popover - JS触发器

回答

相关问题