Используйте всплывающую подсказку на отключенной кнопке AngularJS / JHipster3 - PullRequest
0 голосов
/ 14 февраля 2019

Я использую JHipster 3.0.0, AngularJS 0.7.4 и rxjs 5.5.12.

Цель: Мне нужно показывать всплывающую подсказку при наведении мыши на кнопку, когда она отключена.

Проблема: Я не могу показать всплывающую подсказку на отключенной кнопке.

Я перешел к нескольким темам на SO.Я попробовал несколько решений, и я нашел одно, которое могло бы работать, я думаю.

Попробуйте

Использование этой темы: Как включить всплывающую подсказку при отключенной кнопке?

Эта скрипка: 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) HTMLfile: 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) Обратите внимание, что файлы 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 нет.Действительно, кнопка получает стиль обертки инструмента, но подсказка не появляется при вводе мышью.

Не могли бы вы мне помочь, пожалуйста?

Спасибо,

Мануэла

1 Ответ

0 голосов
/ 18 февраля 2019

Наконец-то это сработало:

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

Хорошего дня,

Мануэла

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...