Conceal Tooltips with Materialize CSS

I'm trying to figure out how to hide the tooltip that appears when hovering over 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 issue I'm facing is that when I click on the button, the print layer immediately shows up and includes the tooltip on the printed page. I want to find a way to hide the tooltip when clicking on the print button.
Any help would be greatly appreciated. Thank you!

javascriptjqueryhtmlcssmaterialize

Answer â„–1

I found success by using the close command with the tooltip: 

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

Answer â„–2

If you follow these steps, it should work smoothly.

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

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

    // Make sure to reopen the tooltip to avoid it staying closed
    $('.tooltipped').tooltip(); 

}

Answer â„–3

Eliminate the tooltipped attribute

<ul>
 <li>
  <a class="btn-floating blue" onclick="window.open();return false;">
   <i class="material-icons" data-position="right" data-delay="100" data-tooltip="Open new window">open_in_new</i>
  </a>
 </li>
</ul>

Answer â„–4

Experiment with both options or choose one:

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

// Concealing tooltip after clicking and opening a link in a new tab
$('.tooltipped').mouseleave(function(){
  $('.material-tooltip').css("visibility", "hidden");
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to locate Vue.js $ref reference

I am attempting to dynamically adjust the padding of an element through inline styles, depending on the height of its parent. My approach involves: <div class="stock-rating positive" ref="stockRating"> <div class="stoc ...

javascriptvue.js

Placing a picture within a box that is 100% of the viewport height

After searching for a while, I still haven't found a solution to my problem. I am currently working on a Personal portfolio that has different sections with a height of 100vh each. However, I am facing difficulty in positioning the images within the s ...

htmlcss

Deactivate a few CSS guidelines

For my project, I am incorporating interfaces within other interfaces and have been facing conflicts between bootstrap rules and other CSS files. To address this, I encapsulated all Bootstrap rules within a .use_bootstrap class. Now, within my interfaces ...

htmlcsstwitter-bootstrapcss-selectors

Using JavaScript to dynamically invoke a function and pass parameters dynamically

Exploring a dynamic method call with parameters in JavaScript. let obj = { method: 'foo1', params: ['one', 'two'] } foo1(p1, p2) { // do something } To execute it => [obj.method](obj.params) Is there a way to dyn ...

javascriptarraysobjectecmascript-6

Troubleshooting difficulties integrating NodeJS with R using an R script

I have been attempting to execute an R-script from a js-file but I am consistently receiving a null value as the return. Here is my folder structure: -R_test --example.js --helloWorld.R The contents of example.js are as follows: var R = require(" ...

javascriptrnode.js

Markdown Custom Parsing

Every week, I create a digest email for my university in a specific format. Currently, I have to manually construct these emails using a cumbersome HTML template. I am considering utilizing Markdown to automate this process by parsing a file that contains ...

pythonhtmlrubymarkdownhtml-email

Sending a model from a View to a boolean method using AJAX in ASP.NET MVC

I am looking to pass a model from BeginForm to a boolean method in the Controller. If the boolean method returns TRUE, I want to refresh a partial view using AJAX. Otherwise, if it returns FALSE, I want to display a pop-up with information from the method ...

c#jqueryasp.net-mvc

Filling a HTML div with data through PageMethods and AJAX

My issue is quite unique. Despite checking numerous examples before reaching out here, I am facing a peculiar problem. I have a div element in my ASPX file and I am using AJAX to send a POST request to populate it. <script> function send(input ...

javascriptjquery.netajax

Converting a PHP AJAX response JSON object into a jQuery array

In my development project, I have an en.php file containing an array as shown below: $lang = array( // MENU ITEMS "welcome" => "Welcome", "admin_panel" => "Administration panel", ... ); I want to store this array in a JavaScript arr ...

phpjqueryarraysjsonstore

What is the best way to utilize the history prop in conjunction with other props?

I am currently using react-router-dom along with react. My goal is to include additional props along with the history prop import React from 'react'; function MyComponent({ history }) { function redirect() { history.push('/path&ap ...

javascriptreactjsreact-hooksreact-router-domhistory

Updating Input Field with AngularJS Date Format During Input Field Change

Here is the input field for date: <div class="input-group date"> <input type="text" class="form-control" id="datepicker" placeholder="dd/mm/yyyy" ng-model="abs.date"> </div> The value in this field is updated ...

javascriptangularjsdate

Can jQuery be used to add a fresh entry into a database table connected to MySQL?

Recently I had a job interview where they posed a question about inserting a new record into a MySQL database using only jQuery. I suggested using jQuery ajax, but they insisted on a solution involving solely jQuery and MySQL - no other technologies perm ...

jquerymysql

The slider customization on Joomla is functioning perfectly on my local machine, but it seems to be encountering some issues on

Having recently started working on a Joomla website for the first time, I encountered some challenges when trying to add a slider module. Despite successfully implementing the slider on my local machine, I faced issues when transferring the code to the liv ...

javascriptphpjqueryjoomlajoomla2.5

Navigating through different views in Angular 2 using UI Router and ng2 routing directly from

I am currently utilizing the UI-Router ng2 and attempting to change routes after a certain function is triggered. My code snippet looks like this: SomeFunction() { if(condition){ router.navigate(['/newRouteName']); } } It's ...

javascriptangularroutesangular-ui-router

Node, Express, and Angular redirection problem encountered

I have a web application built with node, express, and angular. The app consists of two main pages - a user profile page and a login page. My goal is to redirect any user who is not logged in to the login page when they try to access the profile page. Howe ...

javascriptnode.jsangularjsexpress

Is it possible to toggle between thumbnails and a larger image in a jQuery gallery?

Hello, I am new to website development and I would like to create a jquery based photo gallery for my personal website. One feature that really catches my eye is this one (for example): The gallery has a large thumbnail grid where you can click on a thumb ...

jquerycssgalleryslideshowthumbnails

Automatically resizing images in a canvas when their resolution exceeds the canvas size in HTML5

I am currently using Html5, fabric.js, and JavaScript to upload multiple images to a canvas. However, there are instances where the uploaded image size exceeds that of the canvas. I am looking for a way to ensure that the image is set to a fixed size. v ...

javascriptcsshtmlcanvasfabricjs

Cipher Caesar - symbols and additional characters

I've constructed a Caesar Cipher script down below, however, I wish for the output string to contain spaces and other characters. Despite my attempts with regex, it doesn't seem to rectify the issue or maybe I'm not utilizing it correctly †...

javascriptarraysstringcaesar-cipher

Update the state within a different function in Vue.js

Just starting out with Vue.js and I'm trying to figure out how to update the component's state from a function in another file. I have a basic form with only an input file element. Once the user selects a file, the onChange handler will be trigg ...

javascriptvue.js

Creating distinctive identifiers for individual function parameters in JavaScript using addEventListener

I am working on a for loop that dynamically generates elements within a div. Each element should trigger the same function, but with a unique ID. for(var i = 0; i < 10; i++) { var p = document.createElement("p"); var t = document. ...

javascriptdom-events