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文档：Bootstrap PopOver

Answer 1

您可以通过调用

以编程方式显示工具提示

.popover（＆＃39;显示＆＃39）

$(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。

Bootstrap Popover - JS触发器

1 个答案: