Мне нужно отобразить всплывающую подсказку на отключенной кнопке и удалить ее на включенной кнопке. В настоящее время все работает наоборот.
Каков наилучший способ инвертировать это поведение?
$('[rel=tooltip]').tooltip();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<hr>
<button class="btn" disabled rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button>
<button class="btn" rel="tooltip" data-title="Dieser Link führt zu Google">button not disabled</button>
Вот демо
PS: я хочу сохранить disabled
атрибут.
javascript
jquery
html
twitter-bootstrap
twitter-bootstrap-tooltip
Лорейн Бернард
источник
источник
Ответы:
Вот некоторый рабочий код: http://jsfiddle.net/mihaifm/W7XNU/200/
Идея состоит в том, чтобы добавить всплывающую подсказку к родительскому элементу с
selector
параметром, а затем добавить / удалитьrel
атрибут при включении / отключении кнопки.источник
Вы можете обернуть отключенную кнопку и поместить подсказку на обертку:
Если обертка есть,
display:inline
подсказка не работает. Использованиеdisplay:block
и,display:inline-block
кажется, работает нормально. Он также отлично работает с плавающей оболочкой.ОБНОВЛЕНИЕ Вот обновленный JSFiddle, который работает с последней Bootstrap (3.3.6). Спасибо @JohnLehmann за предложение
pointer-events: none;
отключить кнопку.http://jsfiddle.net/cSSUA/209/
источник
btn-group
s?Это можно сделать с помощью CSS. Свойство «pointer-events» - это то, что препятствует появлению всплывающей подсказки. Вы можете получить отключенные кнопки для отображения всплывающей подсказки, переопределив свойство «pointer-events», установленное загрузчиком.
источник
[disabled]
кнопками. Также не видно, как Bootstrap (2.3.2) назначает события указателя где-либо в источнике.Если вы отчаянно нуждаетесь (как и я) в подсказках к флажкам, текстовым полям и тому подобному, то вот мой хаккейский обходной путь:
Рабочие примеры: http://jsfiddle.net/WB6bM/11/
Я считаю, что всплывающие подсказки по отключенным элементам формы очень важны для UX. Если вы мешаете кому-то что-то сделать, вы должны сказать им, почему.
источник
Эти обходные пути безобразны. Я отлаживал проблему в том, что при начальной загрузке автоматически устанавливаются события-указатели на свойства CSS : нет для отключенных элементов.
Это магическое свойство приводит к тому, что JS не может обрабатывать какие-либо события в элементах, соответствующих селектору CSS.
Если вы перезаписываете это свойство на значение по умолчанию, все работает как шарм, включая всплывающие подсказки!
Однако вам не следует использовать такой общий селектор, потому что вам, вероятно, придется вручную остановить распространение событий JavaScript, как вы знаете ( e.preventDefault () ).
источник
В моем случае ни одно из вышеперечисленных решений не сработало. Я обнаружил, что проще перекрыть отключенную кнопку, используя абсолютный элемент, как:
демонстрация
источник
Попробуйте этот пример:
Подсказки должны быть инициализированы с помощью
jQuery
: выберите указанный элемент и вызовитеtooltip()
метод вJavaScript
:Добавить
CSS
:И ваш HTML:
источник
Вы не можете получить всплывающую подсказку на отключенной кнопке. Это связано с тем, что отключенные элементы не вызывают никаких событий, включая всплывающую подсказку. Лучше всего подделать отключенную кнопку (чтобы она выглядела и действовала так, как будто она отключена), поэтому вы можете вызвать всплывающую подсказку.
Например. Javascript:
Вместо просто
$('[rel=tooltip]').tooltip();
HTML:
JSFiddle: http://jsfiddle.net/BA4zM/75/
источник
Вы можете просто переопределить стиль «указателя-событий» в Bootstrap для отключенных кнопок через CSS, например
Лучше все же быть явным и отключить определенные кнопки, например
источник
Это то, что я и tekromancr придумали.
Пример элемента:
примечание: атрибуты всплывающей подсказки могут быть добавлены в отдельный div, в котором id этого div должен использоваться при вызове .tooltip ('destroy'); или .tooltip ();
это позволяет всплывающую подсказку, поместите его в любой JavaScript, который включен в HTML-файл. эта строка может быть необязательной для добавления, однако. (если во всплывающей подсказке отображается эта строка, не включайте ее)
уничтожает всплывающую подсказку, см. ниже для использования.
предотвращает нажатие кнопки. поскольку атрибут disabled не используется, это необходимо, в противном случае кнопка будет по-прежнему активна, даже если она «выглядит» как отключенная.
Используя bootstrap, вам доступны классы btn и btn-disabled. Переопределите их в своем собственном файле .css. Вы можете добавить любые цвета или как хотите, чтобы кнопка выглядела как отключенная. Убедитесь, что вы держите курсор: по умолчанию; Вы также можете изменить то, как выглядит .btn.btn-success.
добавьте приведенный ниже код к тому, что javascript контролирует, когда кнопка станет активной.
подсказка теперь должна отображаться только когда кнопка отключена.
если вы используете angularjs, у меня также есть решение для этого, если хотите.
источник
destroy
всплывающей подсказки. (См. Это ) Однако$("#element_id").tooltip('disable')
и$("#element_id").tooltip('enable')
работа для меня.Если это кому-нибудь помогло, я смог получить отключенную кнопку для показа всплывающей подсказки, просто поместив в нее промежуток и применив там всплывающую подсказку, а вокруг нее angularjs ...
источник
На основе Bootstrap 4
Все подробности здесь: Bootstrap 4 doc
источник
Рабочий код для Bootstrap 3.3.6
Javascript:
CSS:
источник
Вы можете имитировать эффект, используя CSS3.
Просто снимите отключенное состояние с кнопки, и всплывающая подсказка больше не будет отображаться ... это отлично подходит для проверки, поскольку код требует меньше логики.
Я написал эту ручку для иллюстрации.
CSS3 Отключенные подсказки
источник
Просто добавьте отключенный класс к кнопке вместо атрибута disabled, чтобы сделать его визуально отключенным.
Примечание: эта кнопка только кажется отключенной, но она по-прежнему вызывает события, и вы просто должны помнить об этом.
источник
pointer-events: auto;
не работает на<input type="text" />
.Я выбрал другой подход. Я не отключаю поле ввода, но заставляю его действовать как отключенный через css и javascript.
Поскольку поле ввода не отключено, подсказка отображается правильно. В моем случае это было проще, чем добавление оболочки, если поле ввода было отключено.
источник
Для Bootstrap 3
HTML
CSS
JS
источник
Я наконец решил эту проблему, по крайней мере с Safari, поставив «pointer-events: auto» перед «disabled». Обратный порядок не сработал.
источник