Materialize: Tooltips not disappearing

[ArturGasparyan]

Hello, we're using the Materialize-css "tooltipped" feature all over our website, but unfortunately, every once in a while the tooltip does not disappear after removing the mouse. Any ideas? We initialise them in window.load

We were not able to reproduce the error regularly. It seems to happen with tooltips which are triggered quite early after window.load...

Thanks

[iqbalaqaba]

Hello @ArturGasparyan
Could you provide us your website link or some of code snippets ? Have you validate your html files in https://validator.w3.org/ ?
Thanks ! :+1:

[reggaemuffin]

@iqbalaqaba We have the same problem (we use meteor for it so our html should be valid)

[iqbalaqaba]

ah sorry @Kostronor i'm not specialize enough on using meteor... maybe asking to the admin @Dogfalo ?

[Dogfalo]

Are you removing any elements in JavaScript? I think this could be happening if something removes the tooltipped element while the mouse is still hovered over it.

[reggaemuffin]

@Dogfalo That could be the case. Meteor uses Blaze to render template and iron router to change them dynamically. Most tooltip not disappearing happens when I change routes. Is there a way to manually remove rogue tooltips on route change? Or would it be possible to make materialize check orphaned tooltips every second f.e.?

[Dahkon]

Same here with Backbone. Elements are removed on click so the tooltip is not disapearing. Any solution ?

Never mind found the solution for me :
$('.tooltipped').tooltip('remove');
Before the view is the removed

[fega]

We need something to reproduce it properly :/

Closed due inactivity, feel free to reopen it if it is still necessary.

[reggaemuffin]

@fega the problem still exists. All these new js frameworks like meteor, blaze, angular, react etc. will swap elements out. And when you have a tooltip active but the element removed it sometimes stays.

The most basic thing to reproduce should be a link with a tooltip, that onClick removes itself.

[reggaemuffin]

@fega I found a bin to reproduce: https://output.jsbin.com/hetoreboge

source: https://jsbin.com/hetoreboge/3/edit?html,js,output

[mozfet]

I have a dynamically rendered Meteor template that is an icon with tooltip. For me this worked to remove the tooltips on a clicked button that is removed from the view after being clicked on.

Template.iconButton.events({
  'click'(event, template) {
    const instance = Template.instance();
    instance.$('.tooltipped').trigger('mouseleave.tooltip');
  },
  'hover'(event, template) {
    const instance = Template.instance();
    instance.$('.tooltipped').trigger('mouseenter.tooltip');
  }
});

Template.iconButton.onDestroyed(() => {
  const instance = Template.instance();
  instance.$('.tooltipped').tooltip('remove');
});

[etheleon]

@mozfet works like charm

[Dogfalo]

We're adding close open methods to tooltips. You will be able to use these in v1 to handle these js framework cases like this.

[shailabsinghha]

Following will work will the latest version as of now https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js

//for right or left click(any)
$('.tooltipped').mousedown(function(){
$('.material-tooltip').css("visibility", "hidden");
});

// leaving after click in case you open link in new tab
$('.tooltipped').mouseleave(function(){
$('.material-tooltip').css("visibility", "hidden");
});

[ananthsvpr]

Materialize CSS always generate id for each tool-tip, may be this is still in your DOM.
Find the element with tool-tip-id and remove. I fix this issue with below code change onClick element, I use react-materialize 2.4.8

this._remove = element} id="tooltipped" tooltip="Remove" onClick={ this._handleRemoveClick }> highlight_off

_handleRemoveClick(event){
let removeBtnId = this._remove._btnEl.dataset.tooltipId;
window.$(#${removeBtnId}).remove();
}

[aldrin431]

Using JQuery works for me:

var tooltip = $('.material-tooltip'); tooltip.remove();