CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Mark
Mark

Reputation: 4873

Bootstrap Popover - JS Trigger

I'm trying to trigger Bootstrap's Pop Over with JS.

I want to be able to change the message and title relative to the link I click.

It works if I actually click the link, but I want to achieve this via Jquery .Click event.

Here is my current JS code: //Global Tooltip Functionality

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

Here is my DOM element I am calling function from:

<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>

Here is the pop-up container(css hides this, I only want to see the pop-up):

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

Bootstrap Documentation: Bootstrap PopOver

Upvotes: 1

Views: 2495

Answers (1)

wowo_999
wowo_999

Reputation: 856

You can show a tooltip programatically by calling

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

Try not hiding the popover container as well, it is most likely hiding your popover.

Upvotes: 1

Related Questions