CODEWITHSUNDEEP
javascriptjquerybootstrap-4
comp32
comp32

Reputation: 241

How to make tooltips hide by clicking on them?

How can I make a tooltip never hide unless the actual tooltip is clicked on? Would a popover work better for this?

var Button = document.querySelector('.Button');

$(Button).attr("data-toggle", "tooltip");
$(Button).attr("data-placement", "top");
$(Button).attr("title", "SHOWING TOOLTIP");

$('[data-toggle="tooltip"]').tooltip(); 

if(status == true) {

        $(Button).tooltip('show');
        $(Button)
            .mouseenter(function() {
                $(this).tooltip('show');
            })
            .mouseleave(function() {
                $(this).tooltip('show');
            });
        $(Button).click(function() {
                console.log("clicked tooltip");
                $(this).tooltip('hide');
            });
    }

The reason I have the mouseenter and mouseleave methods is that is the only way I was able to have the tooltip permanently show.

The issue I am having is that if I click on the tooltip, it doesn't hide the tooltip, it actually just clicks on the button element. Is there anyway around this? The objective I am trying to achieve is that the tooltip should permanently show and then be hidden when the tooltip is clicked on.

EDIT: I am using Bootstrap for the tooltip along with jQuery.

Upvotes: 0

Views: 4824

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362360

You can hookup a click event to hide it once the tooltip is shown...

$('[data-toggle=tooltip]').on('shown.bs.tooltip', function () {
    $(".tooltip-inner").click(function(e){
        $('[data-toggle=tooltip]').tooltip("hide");
    });
});

https://www.codeply.com/go/6M28mCZHwE

If you only want the tooltip itself to hide the tooltip, change the data-trigger to manual and add a click handler to show the tooltip. This will prevent the trigger from hiding the tooltip.

$('[data-toggle=tooltip]').click(function(){
    $(this).tooltip("show");
});

Upvotes: 1

Related Questions