In Google Chrome, Angular does not display a tool tip when a button is disabled

I've utilized angular along with ng-bootstrap for a project I'm working on. The issue arises when using ngbTooltip to display a tooltip on a button.

<button 
    class="btn btn-success"
    (click)="onSubmit()"
    [ngbTooltip]="tipContent"
    [disabled]="disabled">
    Save
</button>

<ng-template #tipContent>
    Please fill out all mandatory fields before saving
</ng-template>

However, in Google Chrome, the tooltip fails to appear when the variable disabled is set to true and the button is disabled. Interestingly enough, it works fine in Firefox.

You can recreate the problem by visiting stackblitz

Is there a way to display a tooltip on a disabled button?

Answer №1

It seems that the issue you are facing is only occurring in specific browsers (the tooltip displays in Firefox but not in Chrome).

An effective solution to this problem would be to enclose the button within another element and display the tooltip on the wrapper.

<span [ngbTooltip]="tipContent">
  <button type="button" class="btn btn-outline-secondary" [disabled]="disable">
      I have content and bindings in my tooltip!
  </button>
</span>

DEMO: https://stackblitz.com/edit/sstackoverflow-ngtooltip-7te4bd

Answer №2

I encountered some issues with @kurt-hamilton's solution, as the tooltip was appearing inside the button and there was flickering involved.

To address this problem, I decided to utilize Bootstrap's .disabled class instead.

I included the following code snippet: [class.disabled]="!canSave".

Here is how the updated code looks:

<button 
    class="btn btn-success"
    (click)="onSubmit()"
    [ngbTooltip]="tipContent"
    [class.disabled]="disabled">
    Save
</button>

Component file example:

onSubmit() {
    if (!this.canSave) {
        return;
    }
    // onSubmit code
}

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 there a way for me to receive a success message when I successfully set data in Firebase?

I want to retrieve the orderId after successfully adding an order to the Realtime database using angularfirestore. What should I use after set() method to return the orderId? The structure of my order object is as follows: const orderObj: Order = { pay ...

Tips for extracting and entering a value in a React form from a dropdown menu and an input field

Currently working on developing an application for organizing cocktail recipes. Facing an issue with data types for a particular line within a form that includes both select and input elements. Looking for guidance on how to correctly read the data from t ...

Align child elements in the middle horizontally within a col-lg-4 class using Bootstrap

I am currently working with Bootstrap 4.3.1 and utilizing flex for my page layout. <div class='row d-flex align-items-center'> <div class='col-lg-12'> <div class="form-group row"> ...

Prevent loading data in Angular 5 by handling errors from undefined objects

Is there a way to avoid console errors from undefined objects? Imagine I have the following code: name : string; constructor(private data: DataService) { this.data.name.subscribe(res => this.name = res); } In my HTML, I have this: <p> {{name}} ...

The CSS styling for the rows in an Angular Material textarea is unresponsive

I have been working with angular Material design and have implemented a Textarea element. However, I am facing an issue where the height of the Textarea is fixed and cannot be changed. I have tried various solutions without success. How can I adjust the si ...

Exploring the child's type name with React Typescript

In my Typescript application, I am working with React Functional components extensively. I have been attempting to dynamically update certain child components within another component. Here is the code snippet: const memoizedIterateAndAddProps = useCallba ...

The padding on both the left and right sides in Bootstrap is malfunctioning

Today, as I dive into learning Bootstrap, I encountered a strange issue with margins and padding. It seems that whenever I apply overall padding or padding top/bottom, it functions correctly. However, when I try to add padding left or right, it has no effe ...

Error: The recursive list cannot access the 'length' property of an undefined value

I am experiencing an issue with my recursive list, as I am unable to retrieve the entire list. <ul> <ng-container *ngTemplateOutlet="recursiveListTmpl; context:{ list: famillies }" ></ng-container> </ul> <ng-te ...

What is the process of extracting multiple attributes from an object that has been selected by a user using mat-options (dropdown list) in Angular?

Summary: A dropdown list contains objects, unsure how to capture multiple attributes of selected object. Current Implementation: I have successfully created a dropdown list that displays the details of an object retrieved through an API call: <mat-f ...

Utilize multiple validators.patterns within a single value for enhanced data validation

I need to implement two different patterns for the formControlName='value' based on the type selected. If type is 'A', I want to use the valuePattern, and if type is 'B', I want to use the uname pattern. This is my HTML code: ...

Is it possible to integrate Firebase Storage into a TypeScript/HTML/CSS project without the use of Angular or React?

For my project, I am aiming to create a login and register page using TypeScript. Currently, my code is functioning well even without a database. However, I would like to implement Firebase for storing user credentials so that the login process becomes mor ...

Apply a border to the div that has been selected

I have a tool for storing information and I am using *ngFor to display each instance in a line. Is there a way to add a border when clicking on a line? The border should only appear on the clicked line, disappearing from the previous one if another line i ...

Utilizing TypeScript decorators for Node.js authentication and authorization

In the process of developing a server-side Node.js application using TypeScript, I have come to the point where I need to implement authorization. My initial plan was to utilize TypeScript "Method and Class Decorators" for this purpose. However, I came acr ...

Alter text within a string situated between two distinct characters

I have the following sentence with embedded links that I want to format: text = "Lorem ipsum dolor sit amet, [Link 1|www.example1.com] sadipscing elitr, sed diam nonumy [Link 2|www.example2.com] tempor invidunt ut labore et [Link 3|www.example3.com] m ...

what is the best way to horizontally align div elements within a table cell?

https://i.sstatic.net/WMNdD.png It seems that things are a bit disorganized in the image, possibly due to being inside a td element. Is there a way to fix this? <td> <div class="col"> <div class="input-group text ...

Adjust the colors of two elements by clicking a button's onclick event

As stated in the title, I have a button in the books component. When this button is clicked, the color of a div within the books component and another div in the navbar component should change. - Below is the code for the books component : export class Bo ...

How can I designate node modules from a directory located outside the project's root folder?

In my project, I have multiple lambdas that utilize a lambda layer. The structure of the project is organized as follows: lambdas/ create/ index.ts delete/ index.ts layer/ nodejs/ node_modules I want to ensure that each TypeScript ...

Validation of ngModel in Angular for a subcomponent form

One of the components I'm working on has a model structured like this: model={ name, surname, age, birthDate } I am passing this model to a sub-component. <form #form="ngForm" > <input name="name" [(ngModel)]="model.name" required> < ...

Enabling or disabling cell editing dynamically in Ag-grid based on another field's value

I'm currently working with ag-grid in Angular and implementing full row editing. One requirement I have is to dynamically disable editing for a specific field based on the value of another field. However, I need this field to be disabled or enabled im ...

Interface-derived properties

One of the challenges I'm facing is dealing with a time interval encapsulation interface in TypeScript: export interface TimeBased { start_time: Date; end_time: Date; duration_in_hours: number; } To implement this interface, I've created ...