CODEWITHSUNDEEP
javascriptjqueryhtmlcssmaterialize
user7616817
user7616817

Reputation: 347

Hide Tooltip Materialize CSS

i want to hide the tooltip showing when hovering on this element (using Materialize CSS)

<li><a class="btn-floating green" onclick="window.print();return false;"><i class="material-icons tooltipped" data-position="left" data-delay="50" data-tooltip="Print schedule">print</i></a></li>

The problem is that when i click on the button, it immediately shows the print layer and i see the tooltip on the printed page (it'll be printed with the page). i want to hide the tooltip when i click on the print button.
thanks in advance.

Upvotes: 2

Views: 3487

Answers (5)

hoogw
hoogw

Reputation: 5525

You need to do this, it works for me. 

  $('#search_button').click(function(){ 

        // hide all tooltips
        $('.tooltipped').tooltip('close');

        // now you must re-open tooltip, otherwise, it will stay close state
        $('.tooltipped').tooltip(); 

}

Upvotes: 1

Elias Hasle
Elias Hasle

Reputation: 667

Since JS interferes with the CSS, I suggest using the events onbeforeprint and onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint

Upvotes: 0

Shailab Singh
Shailab Singh

Reputation: 91

Try both or any one of them:

//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");
});

Upvotes: 0

Nathanael Mayne
Nathanael Mayne

Reputation: 119

Using the close command on the tooltip worked for me:

$('.tooltipped').tooltip('close');

Upvotes: 3

user8823283
user8823283

Reputation:

Remove tooltipped class

<li>
 <a class="btn-floating green" onclick="window.print();return false;">
  <i class="material-icons" data-position="left" data-delay="50" data-tooltip="Print schedule">print</i>
 </a>
</li>

Upvotes: 0

Related Questions