在禁用按钮 AngularJS/JHipster3 上使用工具提示答案

【问题标题】：Use a tooltip on a disabled button AngularJS/JHipster3在禁用按钮 AngularJS/JHipster3 上使用工具提示
【发布时间】：2019-07-08 07:52:21
【问题描述】：

我正在使用 JHipster 3.0.0、AngularJS 0.7.4 和 rxjs 5.5.12。

目标：我需要在禁用时鼠标进入按钮时显示工具提示。

问题：我无法在禁用的按钮上显示工具提示。

我谈到了几个关于 SO 的话题。我尝试了几种解决方案，并找到了一种我想可以工作的解决方案。

试试

使用本主题：How to enable bootstrap tooltip on disabled button?

这个小提琴：http://jsfiddle.net/cSSUA/209/

1) CSS 文件：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) JS文件：tooltip-wrapper.js

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

3) html文件：实体

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

4) 请注意，tooltip-wrapper css 和 js 文件分别位于 webapp/content/css 或 webbapp/content/js 中。

为了导入这些文件，我在 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>

此尝试过程中出现的问题：

我的问题是css文件被考虑在内，但看起来js文件没有。实际上，按钮获得了工具包装样式，但工具提示不会出现在鼠标输入时。

你能帮帮我吗？

谢谢，

曼努埃拉

【问题讨论】：

标签： angularjs tooltip jhipster

【解决方案1】：

这终于奏效了：

<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>

如果有人需要旧引导版本。

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

祝你有美好的一天，

曼努埃拉

【讨论】：