Tips on preventing jquery ui tooltip from appearing within a child div

Is there a way to include a tooltip only in the parent div and not in its child div?
I am currently using jQuery UI tooltip like this:

$(function () {
    $("#parent_div").tooltip();
});

This is how the HTML looks:

<div id="parent_div" title="Hello Tooltip">
    parent div contents
    <div id="child_div" onMouseOver="show_list();" onMouseOut="hide_list();" title="">
    child div contents
    </div>
    parent div contents
</div>

The issue arises when I give a blank title property (title="") to the child_div. This disables the tooltip from the parent_div after hovering over the child_div.
You can see and test the problem HERE.

I need a solution where the onMouseOver and onMouseOut events are not disabled, as they serve another purpose in the child_div.

Thank you for your help.

Answer №1

If you want to turn off the tooltip when hovering over a child element, and then enable it when moving the mouse away from the child, you can use the following JavaScript code:

  $("#child_div").mouseover(function(){
      $("#parent_div").tooltip('disable');
  })

  $("#child_div").mouseleave(function(){
      $("#parent_div").tooltip('enable');
  })

$(function () {
    $("#parent_div").tooltip();
  
  $("#child_div").mouseover(function(){
      $("#parent_div").tooltip('disable');
  })
  
  $("#child_div").mouseleave(function(){
      $("#parent_div").tooltip('enable');
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<div id="parent_div" title="Hello Tooltip">
    parent div contents
    <div id="child_div" title="">
    child div contents
    </div>
    parent div contents
</div>

Answer №2

attempt to substitute the following:

<div id="child_div" onMouseOver="show_list();" onMouseOut="hide_list();" title="">

with the following:

<div id="child_div" onMouseOver="show_list();" onMouseOut="hide_list();">

Answer №3

Here is my solution. I believe this approach will be helpful for everyone.

$(function () {
    $("#container").tooltip();
  
  $("#sub_container").mouseover(function(){
      $("#container").tooltip('disable');
  })
  
  $("#sub_container").mouseleave(function(){
      $("#container").tooltip('enable');
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<div id="container" title="Hello Tooltip">
    parent div contents
    <div id="sub_container" title="">
    child div contents
    </div>
    parent div contents
</div>

Answer №4

This is the approach I came up with:

$(document).tooltip({
    content: function(){
        return $(this).not("#MY_ELEMENT *[title]").attr('title');
    }
});

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

My goal is to retrieve specific text from an HTML page that contains two distinct classes

I am trying to pull shipping fees from different types of html pages. Each page requires a unique Xpath for extracting the shipping fees. For one type of page, the Xpath is //*[@class="flex flex-row justify-between f6 mid-gray pt2"]//div[2]/text ...

Issue: TypeError - The function addTicket is not recognized as a valid function. Utilize the useState hook within the modal component

I'm currently facing some challenges with the implementation of the useState hook and I am struggling to understand why it is not working as expected. My project involves creating a basic ticket system where users can click on a button to open a moda ...

Unable to utilize the .animate() function in a different jQuery function

I recently created a function called isMoving() where I utilize a jQuery animate function with the direction as a parameter. However, when I try to specify the direction in the isMoving() function and type "right/left/top/bottom" to make the animation work ...

Troubleshooting a timing loop problem with jQuery Ajax and setInterval when using flipCounter's onAnimationStopped feature

In the code below, I am retrieving some data to use for a counter. The problem is that after the initial page load and one interval, things start to go haywire. The calls are made without any delay and the counter cannot react before the next call is made. ...

Is there no "on" function available in the Node readline module?

I am currently working on building a Node.js application that reads a text file line by line using the 'readline' module and displays it in the console. var lineReader = require('readline'); lineReader.createInterface({ input: fs.cre ...

Exploring the functionalities of stores and props within the Vue onMounted lifecycle method

As a newcomer to the Vue Composition API, I've run into some issues with functions like defineProps not being available. My current predicament involves receiving props from a parent component and wanting to store them in the "Pinia" storage after a s ...

Is using $window.location.reload(true) the same as manually pressing CTRL+F5?

I'm working on developing a feature called "version updated" component that displays a banner notifying users when the website has been updated and prompts them to reload. The challenge I'm facing is that some users are experiencing issues with c ...

Selenium unable to interact with Javascript pop-up box

I am currently working on automating a feature for our web application, specifically a form of @mentioning similar to Facebook. On the front end, when a user types @ into a text input, the API is called to retrieve the list of users and display them in a b ...

Combining various font files under a single @font-face declaration

Here is the code snippet I'm currently working with: @font-face { font-family: 'icomoon'; src:url('../fonts/icons/icomoon.eot?2hq9os'); src:url('../fonts/icons/icomoon.eot?#iefix2hq9os') format('embedded-opent ...

I'm having trouble with the margin-right property in my HTML code. What's the best way to align my content

Currently, I have been delving into the world of Responsive Design. However, I am encountering some difficulties in positioning my content centrally when the screen size increases. The issue is as follows: @media screen and (min-width: 950px) { body ...

The ng-bootstrap datepicker does not allow setting a default date prior to selection

I have implemented the ng-bootstrap date picker in my project and I am facing an issue with setting a default date for the input field before selecting a date from the datepicker itself. <input type="text" id="datepicker{{i}}" class="form-control" form ...

How can Angular 2 and Firebase be used to search for an email match within all Firebase authentication accounts?

Is there a method to verify the existence of an email within Firebase auth for all registered accounts when users sign up? Can AngularFireAuth be utilized in an Angular 2 service for this purpose? My authentication system is established, but now I am work ...

Remove child node from data-href feature

I have set up a table with rows that contain a data-href attribute to navigate to each row's specific page. Each row also features an 'edit' and 'delete' button at the end. Everything was functioning properly until I implemented a ...

implementing datepicker on multiple textboxes in jQuery upon button click

I have the ability to show multiple text boxes using jQuery. I am now looking to add a datepicker to those text boxes. Any assistance in finding a solution would be greatly appreciated. Thank you in advance. ...

Upgrade from using fetch to utilize await in order to achieve the same outcome

After transitioning a one-time fetch request code snippet to my API, I encountered the following: let response = await fetch(visitURL, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization& ...

AngularJS and the Angular UI Router were combined for the first time in

Hey everyone, I could really use some help as I'm just diving into the world of AngularJS. Can anyone guide me on how to tackle these pesky errors? Error: app.js:6 > Uncaught ReferenceError: angular is not defined Error: angular.min.js:6 > Unc ...

There was an issue with the event handler: "Encountered an error as 'this.data()' is not recognized as

My HTML list contains links with unique data-… attributes: <ul id="list"> <li><a data-info="link1"> **** </a></li> <li><a data-info="link2">****</a></li> <li><a data-info="link3" ...

Tips on extracting information from an AJAX call using JQuery

My current project involves utilizing a webapi in asp.net that outputs JSON data. I am looking to integrate this webapi with JQuery within a php-created website. The following is the JQuery code I am using to retrieve information from the webapi: $.ajax( ...

The problem with "em" in CSS: preventing it from scaling based on the font-size of a particular element

My website predominantly utilizes "em" for design over "px," which is meant to be more compatible with modern browsers. Most of the text is set at font-size:1em, where 1em equals 16px as a default without specific specification. However, there are sectio ...

Displaying all Sunday events in a jQuery FullCalendar

Is there a way to automatically add events for all the Sundays on my calendar using FullCalendar? day = 'Sunday'; <------ I want to specify this day to create an event var date = new Date(); var event = {id: result.id, title: from_time + &ap ...