The tooltip function is not functioning properly on Internet Explorer when the button is disabled

I have been utilizing a similar solution found at http://jsfiddle.net/cSSUA/209/ to add tooltips to disabled buttons. However, I am encountering an issue specifically in Internet Explorer (IE11).

The workaround involves wrapping the button within a span:

<span class="tooltip-wrapper" title="Nessun esito selezionato">
    <button class="btn btn-primary" type="button" disabled><i class="fa fa-check"></i> Rifiuta</button>
</span>

In the CSS:

.tooltip-wrapper {
  display: inline-block; /* display: block works as well */
}

.tooltip-wrapper .btn[disabled] {
  /* don't let button block mouse events from reaching wrapper */
  pointer-events: none;
}

And in jQuery:

$('.tooltip-wrapper').tooltip({position: "bottom"});

While I can see that the tooltip is being created in the DOM explorer, I am unable to view the actual tooltip itself.

Please excuse any errors in my English and my limited knowledge of HTML/CSS/JavaScript/jQuery/Bootstrap.

javascriptjqueryhtmlcss

Answer №1

$(document).ready(function() { 
  $('[data-toggle="tooltip"]').tooltip(); 
});
.tooltip-wrapper {
  display: inline-block; /* display: block works as well */
  margin: 50px; /* make some space so the tooltip is visible */
  z-index: 2;
}

.tooltip-wrapper .btn[disabled] {
  /* don't let button block mouse events from reaching wrapper */
  pointer-events: none;
}

.tooltip-wrapper.disabled {
  /* OPTIONAL pointer-events setting above blocks cursor setting, so set it here */
  cursor: not-allowed;
}
<script
  src="https://code.jquery.com/jquery-1.10.1.js"
  integrity="sha256-663tSdtipgBgyqJXfypOwf9ocmvECGG8Zdl3q+tk+n0="
  crossorigin="anonymous"></script>
  
Add a `title` attribute for your display text, and use the `$('[data-toggle="tooltip"]` attribute to call on your function. Tested in IE11 using JQuery 1.10.1 and it works.
  
<div class="tooltip-wrapper disabled" data-title="tooltip" title="Dieser Link führt zu Google">
  <button class="btn btn-default" disabled>button disabled</button>
</div>

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

I possess a JSON array object and need to identify and extract the array objects that contain a specific child node

const jsonArray = { "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true, "members": [ { "name": "Molecule Man", "age": 29, "secretIdent ...

javascripttypescript

Creating a lifelike sinusoidal flag animation or flutter effect using SVG格式

I'm attempting to create a lifelike animated svg flag that flutters in the wind. Currently, I am using this simple flag base: <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="100px" viewBox="0 0 200 100" > <p ...

htmlcssanimationsvgsmil

Adjust the top margin of a div to match the height of the screen within an iframe, ensuring cross-browser

Trying to adjust the margin-top of a div to 100% of screen height within an iframe seems to be causing issues with jQuery, as it either returns 0 or inaccurate values. While CSS3's 100vh can work as an alternative, it may not be supported in older an ...

javascripthtmlcss

Issue with alignment of divs causing them to stack in a strange manner instead of floating left and

Check it out in action right here: All I want is for the .news div boxes to gracefully float left and right using the handy cycle helper in Rails. However, the current output isn't quite what I had in mind: This is how I envision the layout should l ...

csshtml

Understanding the functionality of imports within modules imported into Angular

I have been scouring through the documentation trying to understand the functionality of the import statement in JavaScript, specifically within the Angular framework. While I grasp the basic concept that it imports modules from other files containing expo ...

javascriptangulartypescriptnpm

Arrange the grid in a pleasing manner

I'm really struggling with this issue. In my current setup, I have a Grid container that holds two separate grids - one for a textfield and another for a checkbox. Unfortunately, I can't seem to get them to align properly. <Grid container& ...

javascriptreactjsgridmaterial-ui

What is the functionality of a nested child directive root element when placed at the same level as the parent directive root element?

Hello there, I'm currently facing a unique situation that has me stumped. Is it possible to replace the content of a directive's root element with that of a nested (child) directive? Here is an example scenario: <div id=”main”> <n ...

javascriptangularjsangularjs-directive

Steps to locate the incorrect text field after a validation error occurs

After creating a form with jQuery validation, I encountered an issue where the validation function did not pass due to certain conditions not being met. My focus now is on highlighting the error input field after failed validation. ...

phpjqueryvalidation

JavaScript's "for of" loop is not supported in IE 11, causing it to fail

Here is a piece of code I'm using to select and remove a d3.js node: if (d.children) { for (var child of d.children) { if (child == node) { d.children = _.without(d.children, child); update(root); ...

javascriptecmascript-6internet-explorer-11

When utilizing AngularJS, a parse error is triggered by array[ {{value}} ], but I prefer to overlook it

Within the controller, I have a selection list that is displayed like this: <select class="input form-control" id="animationTime" ng-options="item as item.label for item in aniCon.timeOptions track by item.id" ng-model="aniCon.popupTime" ...

javascriptangularjsparsingangular-ngmodelangularjs-ng-init

Assistance needed with WebSocket and Node.js: Unable to connect to wss://domain:8080 - Issue is not specific to any browser

Greetings, this is my initial inquiry on stack overflow so I'll give it my best shot. Despite going through numerous related questions, I haven't found the solution to my issue. I recently delved into Node.js because I required websockets for ce ...

javascriptnode.jssslwebsockethttps

Increase the thickness of the scrollbar track over the scrollbar thumb

I've come across several discussions on making the track thinner than the scrollbar thumb, but I'm looking to do the opposite. Is it possible to have a scrollbar track that is thicker than the scrollbar thumb? ...

javascripthtmlcss

employing JavaScript to present an image

Here is the image code I have: <img id="imgId" src="img/cart.png" style="display: none"/> After clicking a button, it triggers a JavaScript function to show the image document.getElementById("imgId").style.display = "inline" The image display ...

javascriptcss

Looking to decrease Cumulative Layout Shift (CLS) on the NextJS website for enhanced performance

I have chosen to use NextJS with Mantine for my website development. Utilizing createStyles, I have added custom stylings and incorporated various mantine components into the design. After deploying the site on Vercel, I discovered that all performance me ...

javascriptreactjsnext.jsmantinewebsite-metrics

The charts created using chartjs-vue display no data

After following some examples to create a test chart, I am facing an issue where the chart renders blank with dummy data. https://i.sstatic.net/RD77S.png My initial suspicion is that maybe the options are not being passed for the lines, but it seems like ...

javascriptvue.jschart.jsvue-chartjs

Creating a JQuery function that saves an image uploaded from a file uploader when a specific button is clicked within a dynamically generated div

After making an Ajax call, I created a new <div> (referred to as the new div) and appended it to an existing <div> (known as the old div). Within the new div, I included an input [type=file] and a button. My goal is to save the image upon clic ...

jqueryajax

Tips for transforming a Vue 2 website into a progressive web application (PWA) were requested

As I explored the PWA functionality in Vue 3, I noticed that it is not available in Vue 2. If anyone has any insights on how to successfully convert a Vue 2 project into a PWA, I would greatly appreciate your input. Thank you! ...

javascriptnode.jsvue.jsvuejs2progressive-web-apps

Checking whether a node stream operates in objectMode

When working with a node js stream object, how can I ascertain if it is an object stream in objectMode? For example, suppose I have a readable stream instance: const myReadableStream = new ReadableStreamImplementation({ options: { objectMode : true } ...

javascriptnode.jsstream

Tips for choosing a class with a leading space in the name

Struggling with an issue here. I'm attempting to adjust the CSS of a specific div element that is being created dynamically. The current output looks something like this: <div class=" class-name"></div> It seems there is an extra space b ...

javascriptjquery

Updating the variable in Angular 6 does not cause the view to refresh

I am facing an issue with my array variable that contains objects. Here is an example of how it looks: [{name: 'Name 1', price: '10$'}, {name: 'Name 2', price: '20$'}, ...] In my view, I have a list of products bei ...

javascriptangulartypescriptbinding