Close the tooltip automatically after a set period

Looking to create an effect where a tooltip appears when hovering over an element and then disappears after a few seconds, even if the mouse is still on the element. Here is my current code:

<div data-sentence-tooltip="yes" data-tooltip-content: "some content"> some text </div>
$('[data-sentence-tooltip="yes"]').tooltip({title: function(){return $(this).attr('data-tooltip-content')}});

I have tried a couple of solutions found in related SO questions:

setTimeout(function(){$(".tooltip").fadeOut("fast");}, 2000);

and

jQuery.fn.delay = function(time,func){
    return this.each(function(){
        setTimeout(func,time);
    });
};

$('[id^="tooltip"]').delay(2000, function(){
    $('[id^="tooltip"]').fadeOut('fast');
    }
);

However, I suspect these are not working because the .tooltip or id=tooltip* elements are added dynamically to the DOM.

References:

  1. jQuery tooltip, hide after.. time
  2. jquery tooltip set timeout
javascriptjqueryhtmlcss

Answer №1

Inspired by Zoheiry's response, I implemented the following solution:

$('[data-sentence-tooltip="yes"]').on('mouseover', function(){
    setTimeout(function(){
    $('#enclosingParentDiv').find('.tooltip').fadeOut('fast');
  }, 1000);
});

Here are a couple of key points to keep in mind:

  1. I chose to use "mouseover" on each div as the user is hovering their mouse over the content within the div
  2. I specifically targeted .tooltip in the parent div because the tooltip is added as a sibling element.

Answer №2

One way to enhance your code is by adding the following function:

$('[data-sentence-tooltip="yes"]').on('mouseover', function(){
  // If the tooltip is a child of the element being hovered on
  // Perform this action
  setTimeout(function(){
    $(this).find('.tooltip').fadeOut();
  }, 2000);

  // If the tooltip is a sibling of the element being hovered on
  // Perform this action instead
  setTimeout(function(){
    $(this).parent().find('.tooltip').fadeOut();
  }, 2000);
});

This strategy ensures that your code will specifically target the .tooltip after you have interacted with the item triggering its display.

Answer №3

Through my own exploration, I was able to solve this puzzle by delving into the element using Chrome inspect tool. It's worth noting that this method may not be foolproof and could differ in effectiveness when used with other web browsers.

$('input').on('mouseover', function() {
    if(!$(this).is(":focus"))
        $("#" + $(this).attr("aria-describedby")).delay(800).fadeOut(800);
});

The optional if clause within the code ensures that it only functions when focus is not on the textfield. This prevents the tooltip from persistently displaying if the textfield is in focus.

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

Can the combination of two .html files create a single file?

Currently, I am in the process of learning how to create a website using Google App Engine with Python 2.7 and Jinja2. I have a question regarding the possibility of combining two separate HTML files into one. In the main HTML file, my goal is to include ...

htmlgoogle-app-enginejinja2

Adjust the line height appropriately to prevent any text from being cut off

I need a solution for displaying multiline text in a div with overflow:hidden without clipping the text. Here's an example of clipped text: I want to achieve this using only Pure CSS, without relying on Javascript. If my div has a fixed height, I c ...

htmlcssoverflow

Tips for updating information when a button is chosen

Hello everyone, I need some help with a form that has three select buttons. The button labeled "Distribute" is already selected when the page loads, and it contains information about full name, password, and location. How can I use JavaScript to create a c ...

javascripthtmlcss

What could be causing the value not to display in my range slider thumb tooltip?

In a recent project of mine, I implemented a range slider with two thumbs - one for setting the minimum value and one for the maximum value. The goal was to provide users with a visual representation of the range they are selecting by displaying the thumb ...

javascripthtmlrangesliderbootstrap-5

Move the image inside the box without directly following the mouse cursor, but at a slightly faster pace

I am facing an issue with a Vue component that allows me to zoom in on an image and move it around the container. The problem is, when the image is zoomed in, it moves faster than the mouse due to using the scale transform. Additionally, I noticed that cl ...

javascriptcssvue.js

"Create a new row in the list by selecting an option from the drop-down

I'm experimenting with the following scenario. There is a function that reveals a hidden list based on a dropdown selection. To see it in action, please click here. What I am aiming to achieve is for Option1 to display the content of #List-Option1 ...

javascriptjquery

Generating input fields dynamically in a list and extracting text from them: A step-by-step guide

I am designing a form for users to input multiple locations. While I have found a way to add input boxes dynamically, I suspect it may not be the most efficient method. As I am new to this, I want to ensure I am doing things correctly. Here is how I curren ...

javascriptajaxjquery

"Ensuring a fixed table header (thead) with Bootstrap styling in AngularJS: A step-by-step guide

I'm struggling to make the header of my AngularJS webpage sticky using Bootstrap Styling. Despite trying multiple solutions, none seem to work correctly. Does anyone have a simple approach to fix this issue? Additionally, when I attempt to make the he ...

htmlcssangularjsbootstrap-4

What is the equivalent of Buffer.from(<string>, 'hex') in Python?

I am currently facing the challenge of translating a Typescript library into Python. The specific library I am working with is bs58 in Typescript and its counterpart base58 in Python. My issue arises when attempting to replicate the following code: const ...

javascriptpythontypescripthexbase58

Positioning an asp:Button to the right of the asp:Wizard's Next Button

Development Platform: ASP.NET C# Components Used: asp:Wizard and asp:Button I am facing an issue with my asp:Wizard where the additional button I want to place is rendering below the wizard instead of beside the Next Button. Is there a way to resolve ...

asp.netcssalignment

What could be causing the NodeJs cluster module to be malfunctioning?

Currently, I am in the process of constructing an express server and have been exploring the concept of scaling NodeJS applications. Upon my research, one of the initial things that caught my eye was the built-in cluster module which allows for leveraging ...

javascriptnode.jstypescriptexpress

Can a 1D array be utilized to create a 2D grid in React?

I needed to display a one-dimensional array in a 2D grid format with 3 rows and 3 columns. The array itself contains numbers from 1 to 9. const array = Array.from({ length: 9 }, (_, i) => i + 1); In my React component, I have it rendering as a series o ...

javascripthtmlcssreactjs

Having trouble positioning a specific element at the top right of the header navbar in Laravel Bootstrap 5

Is there a way to create a top navbar with the project name and menu on the left, and user management on the right? Currently, both options are aligned to the left. Here is an example of what I have: top navbar This navbar is placed in the header, and her ...

htmlcsslaravelnavbarbootstrap-5

Save the current active tab when refreshing the page

Struggling to find a way for the browser to remember the last active tab but haven't been successful. function ShowMyDiv(Obj){ var elements = document.getElementsByTagName('div'); for (var i = 0; i < elements.length; i++) if(element ...

javascriptbootstrap-5jquery-ui-tabs

Optimizing with react and mobX: What You Need to Know

I am new to React and MobX and have been studying various tutorials on using both together. Currently, I am working on creating a form where users can select a product through autocomplete functionality using react-select. Once a product is selected, the i ...

javascriptreactjsmobxmobx-react

Utilize Javascript to extract and showcase JSON data fetched from a RESTful API

I'm attempting to use JavaScript to pull JSON data from a REST API and display it on a webpage. The REST call is functioning correctly in the Firefox console. function gethosts() { var xhttp = new XMLHttpRequest(); xhttp.open("GET", "https://10 ...

javascripthtmljsonajaxrest

Gallery and Endless Carousel with AJAX Integration

Utilizing the Galleria plugin for an image gallery on a page loaded within a frame using ajax. The following code snippet showcases how the AJAX functionality is implemented: $(document).ready(function() { function loadTab(pageUrl) { $.ajax( ...

jqueryajaxgalleriainfiniteinfinite-carousel

The "placeholder" attribute effectively populates the form input in HTML, but when using Angular 2+, the "value" attribute does not fill the input field as expected

Within my Angular UI, I have implemented an edit button that allows users to transform a member's name heading into a form for editing and updating the name. The challenge lies in ensuring that the form is pre-filled with the current name. My issue a ...

htmlangular2-formsplaceholder

The jQuery event handler fails to activate on the initial page load, however, it functions properly after refreshing the page and inspecting the DOM

Encountering a challenge with IE9 and jQuery. Click events on anchor tags function in Chrome, Firefox, and Opera, but fail to fire or have unexpected behavior in IE9. This issue only occurs upon the initial page load when the cache is empty. When clicking ...

jquerycross-browserinternet-explorer-9

How can you position navbar links to the right in Bootstrap?

I have been given an assignment that requires me to create HTML code to replicate a specific webpage design, which can be viewed here: https://i.sstatic.net/GC68r.png One of the requirements is to align the Home, Contact, About Us, and Messages links to t ...

htmlbootstrap-4