0

I trigger a Bootstrap 4 Popper.js Tooltip with jQuery like this:

$('.like-btn').on('click',function(){$(this).tooltip('show');});

The tooltip should disappear after a few seconds. The following solutions did not work:

// 1
$('.like-btn').on('click',function({$(this).tooltip('show').delay(2000).tooltip('hide');});
// 2
$('.like-btn').on('click',function(){$(this).tooltip({delay{show:0,hide:2000}});});
// 3
...; setTimeout($('.like-btn').tooltip('hide'), 2000);

Sebastian Becker
  • 21
  • 3

2 Answers2

1

tooltip('show') returns the DOM element which it was called on. Also you should not call directly tooltip('show') because then tooltip will behave like regular tooltip instead you need to inform bootstrap that you want to trigger it manually 

$(function () {

    $('.like-btn').tooltip({ trigger: 'manual'}); //inform bootstrap that we wish to handle programtically

    $('.like-btn').on('click',function(){
        $(this).tooltip('show');//show

        setTimeout(()=>{
            $(this).tooltip('hide'); // hides when timeouts
        }, 2000);

    }); 

});
Vinay
  • 7,442
  • 6
  • 25
  • 48
  • Thanks, but did not work so far. This is what I got (complete code - tooltrip should be triggerd by clicking on the surrounding div): $('.like-btn').parent('.item_wrapper,.subitem_wrapper').on('click',function(){ $(this).children('.like-btn').tooltip({ trigger: 'manual'}); $(this).children('.like-btn').tooltip('show'); setTimeout(()=>{$(this).tooltip('hide');}, 2000);}); }); – Sebastian Becker May 26 '20 at 11:51
  • You have any demo or something? – Vinay May 27 '20 at 17:20
  • Sorry, not yet online. I helped myself with the following solution in the meantime: – Sebastian Becker May 30 '20 at 15:17
  • // show/hide tooltip on wrapper mouse enter $('.like-btn').parent('.item_wrapper,.subitem_wrapper').on({ mouseenter: function () { $(this).children('.like-btn').tooltip('show'); }, mouseleave: function () { $(this).children('.like-btn').tooltip('hide'); } }); jQery delay() seems to be working under certain circumstances only. Don't know why vanilla JavaScript with setTimeout does not work either in this case. Will post a solution for the initial issue, if I find one. You can always use my posted code for testing ... – Sebastian Becker May 30 '20 at 15:25
0

You can set trigger property as 'focus' on the link button like this

$('.like-btn').popover({ trigger: 'focus' });

Anoop Narayan
  • 111
  • 2
  • Hi and thanks! Don't know why you use "popover". This is not the syntax I know for current Bootstrap/Popper version. Triggering on focus (of parent element) could be an idea, but was not my initial intention and what I asked for. – Sebastian Becker May 26 '20 at 11:58