How can I make the tooltip appear when clicked? Here is my code. Your assistance would be greatly appreciated.
<a href="javascript:;" class="tooltipped info_circle" data-position="bottom" data-delay="50" data-tooltip="Numbers should MUST be 5 digits. Nothing more, nothing less"><i class="fa fa-info-circle"></i></a>
<a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="Please ensure that all numbers are exactly 5 digits long.">Hover over me!</a>
Don't forget to confirm that your browser is compatible with Materialize CSS
You might want to experiment with the 'onmouseover' event as well.
Link to the Materialize tooltip documentation
If you are looking for a solution that works with version 1.0.0, the following method might also work on earlier versions. You can initialize the tooltip when a button is clicked (using the onclick event), and then destroy the instance when the mouse leaves (onmouseleave event).
Example using JQuery:
$('.tooltipped-click').click(function() {
$(this).tooltip();
$(this).tooltip('open');
});
$('.tooltipped-click').mouseleave(function() {
if ($(this).tooltip()){
$(this).tooltip('destroy');
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<a href="javascript:;" class="tooltipped-click info_circle btn" data-position="bottom" data-delay="50" data-tooltip="Numbers should MUST be 5 digits. Nothing more, nothing less"><i class="fa fa-info-circle"></i> Click Me!</a>Example using pure JavaScript:
function createTooltip(){
var elems = document.querySelectorAll('.tooltipped-click');
var options={enterDelay: 50};
var instances = M.Tooltip.init(elems, options);
var instance = M.Tooltip.getInstance(document.getElementById("button"));
instance.open();
}
function destroyTooltip(){
var instance = M.Tooltip.getInstance(document.getElementById("button"));
if (instance){
instance.destroy();
}
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<a href="javascript:;" id="button" onclick="createTooltip();" onmouseleave="destroyTooltip();" class="tooltipped-click info_circle btn" data-position="bottom" data-delay="50" data-tooltip="Numbers should MUST be 5 digits. Nothing more, nothing less"><i class="fa fa-info-circle"></i> Click me!</a>Is there a way to scrape only the newly generated items in sequence? I have a dynamic list that loads with scrolling. There are two methods I can use to scrape all generated divs: Scroll to the bottom of the list and then scrape all generated divs. Scroll ...
Just a heads up before I ask my question - the code I'm about to share is sourced from this video on YouTube, so all credit goes to the creator. JS $(".product-colors span").click(function(){ $(".product-colors span"). ...
I am currently facing a challenge where I need to position an element under another one that has already been relatively positioned. The blue box must remain relatively positioned due to specific constraints within the website development process. For bet ...
In my AngularJS version 1 application with Ecmascript 6, I have a requirement to display a string where one part is in normal weight and the other part is bold. For instance, consider the following scenarios: Will start now Will start in 6 minutes Will ...
Is there a way to hide the search result when the input is empty? While everything is functioning correctly, I would like to prevent the search result from remaining visible after clearing the input field. For example, if you type 'A' and then d ...
I'm struggling to make HTML5 validation work in conjunction with AngularJS. Instead of displaying the error message, the form is submitted even when a field is required. If anyone has any insights on how to successfully implement HTML5 validation wi ...
My webpage is using nivoslider to display images. However, I am facing an issue where the images are overflowing one by one until the page fully loads. I have tried setting the overflow:hidden property in the CSS but it doesn't seem to correct the pro ...
Basic code snippet: <?php session_start(); if ((!isset($_SESSION['valid']) == true)) { unset($_SESSION['valid']); header('location:index.php'); } ?> <!DOCTYPE html> <html lang="pt-br"> <h ...
This is a follow-up from the previous successful discussion on jquery: percentage of two numbers Firstly, I want to express my gratitude for the prompt support provided in the previous post. Now, I am looking to enhance my script further. My goal is to ca ...
I'm trying to create a multi-item carousel using YouTube videos, and although I have managed to get it working with Bootstrap 5 carousel and cards, the animation when the carousel slides is not as smooth as I would like. The issue seems to be that the ...
Scenario : There is a Bootstrap 4 form with: 1 submit button at the bottom. 2 modals, each with a submit button. Working Submit buttons : The main submit button is functional. The submit button for Add new contractor modal is also working. ...
While working on my website, I noticed that the smooth-scroll feature works perfectly on desktop browsers. However, on mobile devices, when I click on a link, it does not scroll to the correct position. It always ends up much lower than expected. Any idea ...
I have two sliders with their own values and properties: https://i.stack.imgur.com/3OZqr.gif My goal is to retrieve the values of these two sliders and calculate a result that will be displayed next to the interest label. The calculation formula is: poun ...
How can a character be printed repeatedly within a table cell using only HTML or HTML and CSS (excluding HTML5)? *(limiting to only HTML or a combination of HTML and CSS) ** The goal is to print the character "." across the entire length of the cell, wit ...
Encountering a peculiar dilemma here. Attempted to apply a background image to a custom style in order to override/extend a bootstrap column style. Additionally, tried embedding a style directly in the div attribute. Strangely, neither method seems to be e ...
I am looking for a solution to switch the image source using attr, while also incorporating a fade effect in the process. I have attempted to implement one of the suggestions from another post, but it is not producing the desired outcome. Current Appearan ...
I currently have a collection of items in the shopping cart that are displayed using Bootstrap rows and columns. Each item includes a PrimeVue InputNumber component for adjusting the quantity of a specific product within the cart. If you'd like to ex ...
Hello there, I need assistance with my code. Here it is: <img id="body_image" usemap="#body_map" src="assets/images/body.jpg" alt=""> <map name="body_map"> <area shape="poly" alt="d" href="#body_chart" name="ad" coords="153, 153, 145, 1 ...
The layout of the page looks like this: https://i.sstatic.net/NGCNP.png I am trying to center the Redbox (containing '1') within the "PlayerOneDiv". Similarly, I want to center the yellow box within "PlayerTwoDiv". return ( ...
I have successfully implemented a Modal service with working HTML/CSS (Check it out on StackBlitz) div.cover { align-items: center; background-color: rgba(0, 0, 0, 0.4); bottom: 0; display: flex; justify-content: center; left: 0; ...