Materialize: Programmatically launching tooltips

Created on 9 Jun 2015 · 5Comments · Source: Dogfalo/materialize

Is there a method to have tooltips display programmatically? trying to solve a use case where tooltips are applied on a floating action button ala google but on mobile devices the tooltip will only launch once the button it belongs to is clicked. Would be great if pressing or hovering on the floating action button would trigger the tooltips to display and once again on click/mouse out of the main floating action button destroy the tooltips.

Tooltip question

Source

supadupdip

Most helpful comment

Using jQuery you can programmatically trigger the _mouseenter.tooltip_ using _trigger()_ function.

$(".tooltip").trigger("mouseenter.tooltip");
setTimeout(function(){$(".tooltip").trigger("mouseleave.tooltip");}, 2000);

That is assuming the tooltip has been initialized with required values before triggering the events.

razakj on 18 Dec 2015

👍4

All 5 comments

any updates on this? I'm looking for similar functionality.

jsduffy on 28 Jul 2015

I ended up ditching materialcss for the tooltips and downloaded the tooltips included in bootstrap 3 to get to what I need. Hopefully in the future materialcss will provide the functionality.

supadupdip on 28 Jul 2015

Using jQuery you can programmatically trigger the _mouseenter.tooltip_ using _trigger()_ function.

$(".tooltip").trigger("mouseenter.tooltip");
setTimeout(function(){$(".tooltip").trigger("mouseleave.tooltip");}, 2000);

That is assuming the tooltip has been initialized with required values before triggering the events.

razakj on 18 Dec 2015

👍4

How an i Use jQuery to programmatically destroy a tooltip after triggering it? ..i have a situation here its left hanging around the screen after the button its showing is clicked and it hits window.location to download a file, i think the window.location is messing with the tooltip so its not destroyed.

please help :-) and thanks