Это то, что я и tekromancr придумали.
Пример элемента:
<a href="http://www.google.com" id="btn" type="button" class="btn btn-disabled" data-placement="top" data-toggle="tooltip" data-title="I'm a tooltip">Press Me</a>
примечание: атрибуты всплывающей подсказки могут быть добавлены в отдельный div, в котором id этого div должен использоваться при вызове .tooltip ('destroy'); или .tooltip ();
это позволяет всплывающую подсказку, поместите его в любой JavaScript, который включен в HTML-файл. эта строка может быть необязательной для добавления, однако. (если во всплывающей подсказке отображается эта строка, не включайте ее)
$("#element_id").tooltip();
уничтожает всплывающую подсказку, см. ниже для использования.
$("#element_id").tooltip('destroy');
предотвращает нажатие кнопки. поскольку атрибут disabled не используется, это необходимо, в противном случае кнопка будет по-прежнему активна, даже если она «выглядит» как отключенная.
$("#element_id").click(
function(evt){
if ($(this).hasClass("btn-disabled")) {
evt.preventDefault();
return false;
}
});
Используя bootstrap, вам доступны классы btn и btn-disabled. Переопределите их в своем собственном файле .css. Вы можете добавить любые цвета или как хотите, чтобы кнопка выглядела как отключенная. Убедитесь, что вы держите курсор: по умолчанию; Вы также можете изменить то, как выглядит .btn.btn-success.
.btn.btn-disabled{
cursor: default;
}
добавьте приведенный ниже код к тому, что javascript контролирует, когда кнопка станет активной.
$("#element_id").removeClass('btn-disabled');
$("#element_id").addClass('btn-success');
$('#element_id).tooltip('destroy');
подсказка теперь должна отображаться только когда кнопка отключена.
если вы используете angularjs, у меня также есть решение для этого, если хотите.