关于javascript：Bootstrap Popover-JS触发器


Bootstrap Popover - JS Trigger

我试图用JS触发Bootstrap的弹出。

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

如果我实际单击该链接，则可以使用它，但是我想通过Jquery .Click事件来实现。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$(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元素：

1
<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隐藏了此容器，我只想看到弹出窗口)：

1
 

引导程序文档：引导程序PopOver

相关讨论

您可以通过调用以编程方式显示工具提示

.popover('显示')

1
2
3
4
5
6
7
8
9
10
11
12
13
$(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容器，这很可能是隐藏您的popover。

相关讨论