Use a tooltip on a disabled button AngularJS/JHipster3

Question

I'm using JHipster 3.0.0, AngularJS 0.7.4 and rxjs 5.5.12.

Goal: I need to show a tooltip when mouseenter on a button when disabled.

Problem: I can't show the tooltip on a disabled button.

I went onto several topics on SO. I tried several solutions and I found one that could work I guess.

Try

Using this topic: How to enable bootstrap tooltip on disabled button?

This fiddle: http://jsfiddle.net/cSSUA/209/

1) The CSS file: tooltip-wrapper.css

/* Tool-tip Manu */

.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;
}

.tooltip-wrapper.disabled {
/* OPTIONAL pointer-events setting above blocks cursor setting, so set it 
here */
    cursor: not-allowed;
}

2) The JS file: tooltip-wrapper.js

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

3) The html file: Entity

<div class="tooltip-wrapper disabled" data-title="Dieser Link führt zu 
Google">
    <button class="btn btn-default" disabled>button disabled</button>
</div>

4) Note the tooltip-wrapper css and js file are in webapp/content/css or webbapp/content/js respectively.

To import those files, I added the following lines in the webapp\index.html

<head>

[...]

     <!-- build:css content/css/tooltip-wrapper.css -->
     <link rel="stylesheet" href="content/css/tooltip-wrapper.css">

[...]

</head>

<body>

[...]

    <script> src="content/js/tooltip-wrapper.js" </script>

[...]

</body>

Problem raised during this try:

My problem is that the css file is taken into an account but it looks like the js file not. Indeed, the button get the tool-wrapper style but the tooltip doesn't appear on mouse enter.

Could you help me, please?

Thanks,

Manuela

score 0 · Answer 1 · answered Feb 18 '19 at 09:12

This worked finally:

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled 
tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" 
disabled>Disabled button</button>
</span>

If somebody need it for old bootstrap version.

https://getbootstrap.com/docs/4.0/components/tooltips/

Have a nice day,

Manuela

Use a tooltip on a disabled button AngularJS/JHipster3

1 Answers1