Unique tooltip when hovering over a div element and an image contained within the div

How can I display two different tooltips when mouseover a div and an image inside the div?

<div id="_div1" runat="server">
<ul>
    <li class="right">
      <asp:Image ID="img1" runat="server" />
    </li>
</ul>
</div>

_div1.Attributes.Add("onmouseover", "javascript:ShowTooltip('divToolTip', " + tooltipText + ");");
_div1.Attributes.Add("onmouseout", "javascript:HideTooltip('divToolTip');");

img1.Attributes.Add("onmouseover", "javascript:ShowTooltipForImg('divImgToolTip'," + tooltipText1 + ");");
img1.Attributes.Add("onmouseout", "javascript:HideTooltipForImg('divImgToolTip');");

The code above is not working as expected, it only shows the div tooltip.

Answer №1

Set event.cancelBubble to true  

for Internet Explorer, and

Use event.stopPropagation()  

for Mozilla

within your image tooltip feature

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

Is requesting transclusion in an Angular directive necessary?

An issue has cropped up below and I'm struggling to figure out the reason behind it. Any suggestions? html, <button ng-click="loadForm()">Load Directive Form</button> <div data-my-form></div> angular, app.directive(&apos ...

Issue with triggering onchange action for Multiple File Upload functionality

I'm currently in the process of developing a Website that requires a feature allowing users to upload multiple files. Here is the input-field I am working with: <div class="carousel-item carousel-custom-item active input-wrapper" > <inpu ...

What are some ways to streamline and improve the readability of my if/else if statement?

I've created a Rock Paper Scissors game that runs in the console. It currently uses multiple if/else if statements to compare user input against the computer's selection and determine a winner. The code is quite lengthy and repetitive, so I' ...

Next.js implementation of dynamic routing

Hello, I'm currently facing a challenge while working with dynamic routes in Next.js. The file in question is named [type].js, and it contains the following code: import React from 'react'; import AuthSection from 'components/AuthSectio ...

What is the best way to change a date from the format DD/MM/YYYY to YYYY-MM-DD

Is there a way to use regular expressions (regex) to convert a date string from DD/MM/YYYY format to YYYY-MM-DD format? ...

The webpage displays the element as <span class="icon">&#xe80d;</span> instead of rendering it properly

In my ReactJS project, I have created a component called Menu1item: class Menu1item extends React.Component{ render(){ return ( <div> {this.props.glyph}{this.props.value} </div> ) ...

The RemoveEventListener function seems to be malfunctioning within Angular2 when implemented with TypeScript

I am currently incorporating three.js into Angular2. The code I am using is quite straightforward, as shown below. this.webGLRenderer.domElement.addEventListener('mousedown', ()=>this.onMouseDown(<MouseEvent>event), false); this.webGLR ...

Is it considered a best practice in React to modify styles of elements using the className state?

I have a unique component that can showcase either an error message or a success message. These are the only two possible "states" it can be in, so the styling is limited to either of these options: for success: background-color: green; for error: backgro ...

The split() function returns a string that remains unaltered and intact, without any

I am attempting to separate this string: 120,00 m² into two distinct parts like this: 120 m² This is the code I have been using: var test = jQuery('#wpsight-listing-details-3 .span4:nth-child(4) .listing-details-value').html(); var pa ...

Which kinds of data are ideal for storage within the Vuex (Flux) pattern?

Currently delving into the world of Vuex for the first time as I develop an application in Vue.js. The complexity of this project requires a singleton storage object that is shared across all components. While Vuex appears to be a suitable solution, I am s ...

Creating an array with user-selected objects in IONIC 3

I've been attempting to separate the selected array provided by the user, but unfortunately, I'm having trouble isolating the individual elements. They are all just jumbled together. My goal is to organize it in a format similar to the image lin ...

What steps should I take to resolve the "undefined property match cannot be read" error that's showing up in this code?

Currently, I am facing an issue while attempting to integrate the nativescript-imagepicker plugin into my Nativescript App. I keep receiving an error message stating **cannot read **property match of undefined**. Below is a summary of the steps I have take ...

Determining the necessary data to send via ajax for a particular issue

Currently, I am learning JavaScript and have encountered another challenge along the way. I am looking for assistance in understanding the concept, whether it is a solution in jQuery or Angular. I have two types of tasks in my HTML - audio or graphic. The ...

Discover the flawless way to transmit client geolocation to a server. Encounter an intriguing hurdle: Unable to access undefined properties (specifically 'loc') while reading

I encountered an error that says "TypeError: Cannot read properties of undefined (reading 'loc')". This error was triggered when I attempted to pass the user's location to a server through a POST request. In my HTML file, I have included th ...

JavaScript allows you to merge two attributes of an object together

I currently have an object array stored in JavaScript. Here's an example: objArr = [{"FirstName":"John","LastName":"Doe","Age":35},{"FirstName":"Jane","LastName":"Doe","Age":32}] My goal is to transform this object array into a new format like the f ...

Tips for effectively managing errors (whether they are in the form of strings or objects) in express.js with the

While I have experience working with express.js applications, I am still trying to find the most effective way to handle errors. Since io.js has been a reality for a few months now, I have started using native Promises to manage asynchronous operations. T ...

Create a div element that is fixed position, with a width that adjusts dynamically, and is centered on

Even though this is a common issue, I have yet to find a solution that actually works for me. The centred div in my chrome extension isn't displaying correctly, even though it works perfectly on jsfiddle. After dynamically appending a div with specif ...

Troubleshooting a Tiny Bottom Sheet Problem in react-native

On my page, I have a bottom sheet that takes up 3/4 of the space. Then, within that bottom sheet, I open another bottom sheet that only occupies 1/4 of the space (without closing the first one). ...

In angular.js, repeating elements must be unique and duplicates are not permitted

My view controller includes this code snippet for fetching data from an API server: $scope.recent_news_posts = localStorageService.get('recent_news_posts') || []; $http({method: 'GET', url: 'http://myapi.com/posts'} ...

A guide on traversing a HTML table and cycling through its contents with JavaScript

I'm currently in the process of constructing a grid with 20 rows and 20 columns of squares, but I am encountering difficulties with looping through table values to effectively create the grid. For more detailed information on the html code, please se ...