Display a tooltip when hovering over a disabled button

There's a button on my page that goes into a disabled state when clicked, and then reverts back to an enabled state once the server update is complete.

The

title = "Test When Disabled"
displays whether the button is enabled or disabled. I only want this title to show up when the button is disabled, hiding it when in the enabled state.

My goal is to display a tooltip only when the button is disabled.

Below is the code snippet:

HTML

<asp:Button ID="TestRun" data-toggle="tooltip" 
    title="Test When Disabled" type="button" Text="Run Integration" 
    runat="server" class='button' OnClientClick="RunIntegrationTest()"> 
</asp:Button>

CSS

.button:disabled {
  // Styles for disabled button
}

.button {
  // Styles for normal button
}

.button:hover:disabled {
  // Styles for hover on disabled button
}

.tooltip {
  // Tooltip styles
}

JS :

// JavaScript functions for handling button functionality

C#:

// C# code snippet for checking the button status

I've been struggling with this simple task for quite some time now without success. All I need is to display text as a tooltip when the button is in a disabled state. Thank you.

Answer №1

Get rid of the title in your ASPX file and then utilize JavaScript to determine if a button is disabled.

if ($(".TestRun").prop( "disabled")){
    $(".TestRun").prop( "title", "Test When Disabled" );
} else{
    $(".TestRun").prop( "title", "" );
}

You can also enhance it with some CSS styling:

button:disabled{
   cursor: not-allowed;
}

Check out the JSFiddle demo here https://jsfiddle.net/5nckxybm/.

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

React - How to Close Material-UI Drawer from a Nested Menu

Currently, I am utilizing a fantastic example (here) to create a dynamic nested menu for my application. Taking it a step further, I am trying to integrate it into a Material UI appbar/temporary drawer. My goal is to close the drawer when the user clicks o ...

Enhance your data visualization with d3.js version 7 by using scaleOrdinal to effortlessly color child nodes in

Previously, I utilized the following functions in d3 v3.5 to color the child nodes the same as the parent using scaleOrdinal(). However, this functionality seems to be ineffective in d3 v7. const colorScale = d3.scaleOrdinal() .domain( [ "Parent" ...

Encountered an error: Incorrect decomposition attempt on a non-iterable object

I have implemented a DataTable component using react-table. Below is the code for my component: const DataTable: React.FC<IDataTable<any>> = (props: IDataTable<any>) => { const { columns, data, className, rowSelection, onChange, ...r ...

Transferring an array between Javascript and Django

I am working with an array of objects in JavaScript, like this: Arr = [0: {k;v}, 1: {k,v}] and so on, each containing numerous fields. The challenge I'm facing is in sending these objects to Django. I have attempted using JSON.stringify to send the ...

Generating a tree structure in Javascript using an array of Objects that hold path information

I have successfully created a folder tree using a list of string paths. Now, I want to take it a step further and make it work with objects instead. var paths = ["About.vue", "Categories/Index.vue", "Categories/Demo.vue", "Categories/Flavors.vue", " ...

Developing a 0.5 star rating feature using ASP.NET

Currently, I am working on developing an ASP.NET web application using C# and VS2010. I am interested in creating a rating system that allows users to rate by selecting stars, similar to the AjaxControlToolkit rating. I have already utilized this control, ...

What is the process for enabling HTMLField in Django Admin and ensuring it is accurately displayed on the template?

One of the models in my Django app is for dorms and it looks like this: class Dorm(models.Model): dorm_name = models.CharField(max_length=50, help_text="Enter dorm name") dorm_description = models.TextField(max_length=1000, help_text="Enter dorm d ...

Unnecessary PHP code will run on its own in JavaScript

Attempting to initiate a session in PHP and assign a value to a session variable within a Javascript function on a PHP/HTML page is creating an issue. The problem arises when the PHP code inside the if statement runs automatically upon loading the page, ra ...

Can the outcome of an SQL query be stored in a variable?

Is it possible to store the output of an SQL select query into a variable within ASP.NET? ...

Error message: Object literal is limited to declaring existing properties

The source code was obtained from this Codesandbox demo: CodeSandbox - Cover Image Example Subsequently, an .eslintrc configuration file was generated with the following content (the only content present): { "extends": "react-app" } However, a TypeScri ...

Include quotation marks around a string in C# to convert it into JSON format

I am utilizing a service that operates with JSON format. However, the JSON data I am receiving does not include double quotes around keys and values. Here is an example of the data I have: [{name:{buyerfirstname:Randy, buyermiddlename:null, buyerlastnam ...

generate an error within an .xls file

When I try to output an .xsl document, it seems like instead of displaying the data correctly, it is showing a screenshot of my home page with text overlaid on it. Any thoughts on why this might be happening? Any ideas as to why? ...

Retrieve data from an ASP.NET Web API endpoint utilizing AngularJS for seamless file extraction

In my project using Angular JS, I have an anchor tag (<a>) that triggers an HTTP request to a WebAPI method. This method returns a file. Now, my goal is to ensure that the file is downloaded to the user's device once the request is successful. ...

Internet Explorer 11 fails to interpret the attribute attr.xlink:href

I am a beginner in Angular 2 and I'm working on creating an icon component. The code I have below works perfectly in Chrome and Firefox, but unfortunately, it's not functioning in Internet Explorer 11. Here is what my component looks like: @Com ...

I am facing an issue where the click event does not trigger on the initial click in

In my main.php file, I have embedded another page called page1.php inside a div. Within page1.php, I am dynamically updating a table when it is loaded. However, I noticed that when I call a function on the click event of the table, the function gets calle ...

Tips for efficiently storing and accessing data obtained from the "RESTBuilder" tool on the Total.js platform

After stumbling upon this informative tutorial on how to build a cryptocurrency comparison site with VueJs, I was inspired to create a single-page application using the total.js platform. My goal is to fetch the list of coins from the "coinmarketcap.com" A ...

The jqm listview is still adhering to the href property even after

Having an issue with my Jquery Mobile listview where a delete button triggers the onClick event, runs the delete function, but then also follows the href link. Even though the delete button is not nested within the href tag. I tried adding return false to ...

Enhancing jQuery Component while making an Ajax request

When a user clicks a button, I am making an ajax call to send out multiple emails. My goal is to update a "Please wait..." div before and after the call with status updates, as well as report any errors that may occur. However, I have encountered an issue ...

Updating multiple values within a JSON object, jsObject, or string

After receiving a response from a web service, I need to replace certain values in the response with custom values that I have defined. One possible approach is to create a tree traverser to identify the specific values and replace them with the custom va ...

Managing global HTTP response errors on Vue/axios using Vuex

I've encountered an issue in my VueJS SPA where a strange limbo state occurs. The application fails to recognize that the JWT token has expired, leading it to still display as if the user is logged in. This typically happens after periods of hibernati ...