Showing a tooltip in Angular when a button is disabled

 <button
  [disabled]="(!dataConceptSummmaryFlag || dataConceptSummmaryFlag === false) && (!selectedLOBFlag || selectedLOBFlag === false) && (!adsListFlag || adsListFlag === false)"
  class="lmn-btn lmn-btn-primary"
  aria-label="Update"
  (click)="updateSelectedScopes()"
  [mtTooltip]="disabledContent"
 >
  Update
 </button>

   <ng-container *ngIf="(!dataConceptSummmaryFlag || dataConceptSummmaryFlag === false) && (!selectedLOBFlag || selectedLOBFlag === false) && (!adsListFlag || adsListFlag === false)">
       <ng-template #disabledContent>No New Scopes Values Selected</ng-template>
   </ng-container>

I attempted to show a tooltip text on hover when the button is disabled based on certain conditions, but unfortunately it did not work as expected. Additionally, I noticed a red close icon appearing when hovering over the button.

javascripthtmlcssbootstrap-4angular-material

Answer №1

To ensure tooltips display on disabled buttons without the ripple effect, include this code snippet in your Material styles overrides:

// Use this workaround to enable tooltips on disabled buttons
button:disabled.mat-mdc-tooltip-trigger {
  pointer-events: auto !important;
  // Remove ripple effect on hover
  > span:first-child {
    display: none;
  }
}

This adjustment will show tooltips without the ripple background when hovered over.

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

Tips for transferring client-side data to the server-side in Angular, Node.js, and Express

Seeking a straightforward solution to a seemingly basic question. I am utilizing Angular's $http method with a GET request for a promise from a specific URL (URL_OF_INTEREST). My server runs an express script server.js capable of handling GET reques ...

javascriptangularjsnode.jsexpressangularjs-http

Would it be beneficial to assign a single class name to all elements with matching styles within a CSS framework?

Currently, I am in the process of creating my own CSS library or framework. However, I have encountered an issue where all 10 li tags share the same classes, such as .pl{ padding-left:10px} .mr{ margin-right:10px}, along with other necessary attributes. Wh ...

htmlcssfrontend

Images with fadeIn-Out effect on a slide restrict the movement of the div

I am currently working on a project where I have a div named "background" containing 4 images (400x300px) that fade in and out in a row every x seconds. The issue I am facing is that these images are displaying on the top-left of the browser, and I am tr ...

javascriptjquerycss

Preserve data on page even after refreshing in Angular

Upon opening my website, I expect to see "Finance/voucher" at the top. However, after refreshing the page, only "Finance" appears which is not what I want. I need it to always display "Finance/voucher" even after a page refresh. I have included all the r ...

javascriptangularcookiesangular-materialsolution

Getting the specific nested array of objects element using filter in Angular - demystified!

I've been attempting to filter the nested array of objects and showcase the details when the min_age_limit===18. The JSON data is as follows: "centers": [ { "center_id": 603425, "name" ...

javascriptjsonangulartypescriptfilter

"Manipulating DOM Elements: Create and Delete Cloned Divs with

I successfully cloned a dropdown with a unique ID on my website. Now, I'm struggling to implement a "x" button that will remove the added clones. Here is the javascript code I'm using: var counter = 1; function addInput(divName, template){ ...

javascripthtml

Ensuring consistent height for CSS divs and buttons

Is there a way to ensure that my buttons have the same height as the questlist_item? Even after applying the same CSS height:auto;, the heights remain unequal. Any suggestions on how to achieve equal button heights? Thank you! var questlist = [{...}]; ...

htmlcss

unable to assign values to this.props (appears as undefined or an empty array)

Upon setting up react/redux, I encountered a peculiar issue. When my component mounts, it should render the information stored in this.props.heroes.data. However, upon logging this data, I receive an unexpected value of [{id:1,heroname:'Batman',r ...

javascriptreactjspostgresqlexpressreact-redux

The existence of useRef.current is conditional upon its scope, and it may be null in certain

I'm currently working on drawing an image on a canvas using React and Fabric.js. Check out the demo here. In the provided demo, when you click the "Draw image" button, you may notice that the image is not immediately drawn on the canvas as expected. ...

javascriptreactjstypescriptcanvasfabricjs

Developing an Angular 2 Cordova plugin

Currently, I am in the process of developing a Cordova plugin for Ionic 2. The plugin is supposed to retrieve data from an Android device and display it either on the console or as an alert. However, I am facing difficulty in displaying this data on the HT ...

javascriptcordovatypescriptionic2cordova-plugins

What could be causing the "Error - Only secure origins are permitted" message to appear for my service worker?

Whenever I attempt to implement a service worker on my progressive web application page, why does the browser console display this specific error message? ERROR "Uncaught (in promise) DOMException: Only secure origins are allowed JavaScript Code: ...

javascriptjqueryprogressive-web-apps

Is it possible to alter the font size in Vuetify depending on the viewport size?

Looking to customize font sizes based on viewports? <v-card-text style="font-size:5em"> Some Heading Here </v-card-text> If you want to change the font size to 3em on XS view, without duplicating code, consider using CSS only. Avoid dupli ...

cssvue.jsviewportvuetify.js

How to automatically choose the first option in a v-for loop in Vue.js

I have a loop that creates a dropdown menu from an array: <select class="form-control" v-model="compare_version" > <option v-for="(version, index) in allVersions" v-bind:value="index" v-bind: ...

javascriptvue.jsv-for

I'm having trouble getting my HTML <button> element to function correctly

I'm currently working on a project where I need to animate a green bar moving upward over a blue bar when a button is clicked. However, no matter what I try, the button doesn't seem to be working. I've experimented with using both the button ...

htmlcssbuttononclicktags

Conditionally enable or disable button by comparing textbox values within a gridview using C# programming

Hey there! I'm currently diving into the world of JavaScript and C#. Feel free to correct me if you see any mistakes along the way. Check out my gridview code snippet below: <asp:GridView ID="GridView1" CssClass="table table-hover table-bordered" ...

javascriptc#asp.netgridview

Angular 2 - synchronizing timer for all users

I have developed a timer that needs to function consistently for all users at the same time. To achieve this, I stored the start_time (timestamp when the timer begins) in my database and implemented the following code snippet to calculate the remaining ti ...

javascriptangularrxjs

The Module Design Pattern in Jquery

In my project, there is a jQuery module pattern that I am having trouble understanding its purpose. There is also a custom plugin called jquery.skInit.js (function($) { $.fn.skInit = function() { return this.each(function(i,element) { var e = ...

javascriptjquerygruntjspagespeedgrunt-contrib-uglify

Is it possible to use powershell to simulate clicking on an angularjs button?

<div class="w-btn" ng-click="vm.callbacks.compareAll();" ng-if="vm.folderData.projects.length > 0 &amp;&amp; vm.noneSelectedProjects" tabindex="0"><i class="glyphicon glyphicon-transfer btn-icon"></i> Report from all</div> ...

htmlpowershell

Check to see if the data provided is found in the database and retrieve the matching information

Here is a table defined as DB: city ------- cityID cityname store Next, we have an HTML form: <input type="text" class="store"> Objective: My goal is for JavaScript to display an alert after the store value is entered, if it already exists ...

javascriptphpjquerydatabase

Uncovering the array within Javascript

I'm struggling to figure out why I can't access an array that PHP sends back to me. When AJAX makes a call, I send back this: $response['success'] = true; In my PHP file, I use echo json_encode($response); to send it. However, when I ...

javascriptphpajax