Bootstrap 弹出框 - JS 触发器

Question

我正在尝试用 JS 触发 Bootstrap 的 Pop Over。

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

如果我实际单击链接，它会起作用，但我想通过 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

Answer 1

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

.popover('show')

$(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');
    });
});

尽量不要隐藏弹出框容器，它很可能隐藏了您的弹出框。