Tooltip not disappearing after button has been removed

[raymantle]

Hi,

Is it possible to have the tooltip disappear when the button has been removed?

I am going to have users this will require tooltips to basically spell out what each button does, but this has caused a problem when the button removes a row from a table.

Thanks,
Ray.

[Teodor]

Maybe you can try adding a static event on click to the element having the tooltip:
$(this).tooltip('hide')

[raymantle]

Hi Teodor. That worked as you suggested. This will be going onto my Wappler cheat sheet.

Thanks,
Ray

[vdweyer]

Not working with me

http://webcrea.be/tooltip.html

Hover effect sticks on a link

I can explain this. I don’t want the visitor to leave my website when he clicks on a link to another website. That is bad usability. So when he closes this page he automatically returns to the page he started with. But the tooltip still sticks on the link even when I move the mouse all over the page. That looks very bad! http://webcrea.be/tooltip.html I can be wrong but I learned Hover is not the same as On focus. I thought that Hover is only active when you move the mouse over the element. W…

[raymantle]

@vdweyer, Try setting your tooltip trigger to hover and set the click on static not dynamic.

[vdweyer]

I did. I signed this problem already in oct '19

[Teodor]

@vdweyer
Seems like the default value of the trigger option is 'hover focus' and not just hover that’s why you are experiencing this issue.
@patrick will check this, so we can improve it in the next update.

Meanwhile as a temporary fix, you can open the dmxAppConnect/dmxBootstrap4Tootltips/dmxBootstrap4Tootltips.js and change:

$(function () {
  $('body').tooltip({
    selector: '[tooltip-title]',
    title: function () {
      var expression = this.getAttribute('dmx-bs-tooltip') || '';
      return dmx.parse(expression) || this.getAttribute('tooltip-title') || '';
    }
  });
});

to

$(function () {
  $('body').tooltip({
    selector: '[tooltip-title]',
    trigger: 'hover',
    title: function () {
      var expression = this.getAttribute('dmx-bs-tooltip') || '';
      return dmx.parse(expression) || this.getAttribute('tooltip-title') || '';
    }
  });
});

this will set all your tooltips will be triggered only on hover and not also on focus.

[vdweyer]

Thank you. This fixes the job.

I read about this ‘hover focus’ default value in several forums but the fixes they sugested did not work.

[Alexander_Paladines]

@Teodor

Maybe you can try adding a static event on click to the element having the tooltip:
$(this).tooltip('hide')

I have this situation, using $(this).tooltip('hide') on click static event solves problem, but I wonder if this is an issue or we have to always use this static event in tooltips on every project?