Materialize: Tooltips not working?

[curliq]

I'm testing with the example from the docs and it just doesn't do anything.

<a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip">Hover me!</a>

All the other Materialize classes are working.

[curliq]

@pnishank The docs say that I only need to initialize it if I add them dynamically. But I had tried it and still no luck.

[Nohinn]

@joaosardinha are you using any other UI framework (like jQuery UI) that might be overriding the Materialize tooltip function?

[curliq]

Thank you @Nohinn , You're right, I was. It's working now. Sorry guys my bad

[simoazzo]

I have jquery-ui-min but it is before materlize, and still not working.

[Nohinn]

@simoazzo try adding this between your jquery-ui-min and materialize references to make sure there are no conflicts between them:
$.widget.bridge('uitooltip', $.ui.tooltip);

[simoazzo]

No Luck :( I have tried but nothing is showing.

[Nohinn]

@simoazzo could you post a snippet of your code so anyone can take a look and try to solve your problem?

[simoazzo]

My markup is the same as demoed in materlize:

<a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip">Hover me!</a>

<link rel="stylesheet" href="/foundation-zurb-template-master/bower_components/Materialize/dist/css/materialize.min.css">
<link rel="stylesheet" href="/foundation-zurb-template-master/dist/assets/css/site.css">

```

I am using this in Angular 2

[sirb0rab0g1]

Hi i am new on angular JS 2 same with this problem i am putting tooltips but its not working anybody ?

[ArturGrigio]

You can also use a stripped version of the jquery ui with only the sortable library:

bower install ui-sortable --save

[SatoAzuri13]

$(document).ready(function () {
      // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered

      $('#comment').tooltip({ delay: 50 });
  });

[htkcodes]

Please make sure to initialize it with the class that you're using it on.

[alan19031216]

maybe is you materialize version is different
the new one is

[Exia01]

@simoazzo try adding this between your jquery-ui-min and materialize references to make sure there are no conflicts between them:
$.widget.bridge('uitooltip', $.ui.tooltip);

• This fixed the issue for me!! Thank you!!! I implemented a smooth scrolling with jquery UI but I had everything else with Materialize This is how I fixed my issue I am including a snippet for me people to see a visual

` // Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
if (
location.pathname.replace(/^\//, '') ==
this.pathname.replace(/^\//, '') &&
location.hostname == this.hostname
) {
let target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate(
{
scrollTop: target.offset().top - 70
},
1000,
'easeInOutExpo'
);
return false;
}
}
});
$.widget.bridge('uitooltip', $.ui.tooltip); //this bridges both tooltip

/* Initializes tooltip */
$('.tooltipped').tooltip();`

Hope this helps!