Как включить Bootstrap Tooltip на отключенной кнопке с помощью AngularJS?

Мне нужно отобразить всплывающую подсказку на отключенной кнопке и удалить ее, если она активирована с помощью AngularJS.Как включить Bootstrap Tooltip на отключенной кнопке с помощью AngularJS?

источник

2016-10-20 Anurag Jaiswal

Вы можете использовать эти свойства, чтобы включить/отключить всплывающие подсказки

$('[rel=tooltip]').tooltip('disable') // Disable tooltips 
$('[rel=tooltip]').tooltip('enable') // (Re-)enable tooltips

Теперь вы можете использовать что-то вроде

$('[rel=tooltip]').tooltip('if button active' ? 'disable' :'enable')

Теперь все это делать в угловом просто создать переменную $ scope.btnValid (если использовать angularjs 1) и передать его в свойство ng-disabled. Это значение будет меняться, как вы хотите от некоторой функции

Теперь просто использовать это значение, чтобы включить/отключить подсказку, как этого

$('[rel=tooltip]').tooltip($scope.btnValid ? 'disable' :'enable')

Надеется, что это помогает

источник

2016-10-20 07:11:28

Предполагая, что вы используете угловой ui- самонастройки:

http://plnkr.co/edit/vA7sizeDWwyC7KxeuGel?p=preview

<body ng-controller="MainCtrl" ng-app="plunker"> 
    <div style="height:100px"></div> 
    <div uib-tooltip="asdsad" tooltip-enable="disableButton" style="display:inline-block"> 
    <button ng-disabled="disableButton" ng-style="{'pointer-events':disableButton ? 'none' : ''}">Hover over me!</button> 
    </div> 
    <br>Check the checkbox to disable the button <input type="checkbox" ng-model="disableButton"> 
</body>

источник

2016-10-20 07:20:04 Fissio

Не работает в Chrome –

Обновлены скрипку работать на хроме - добавил обертывание Div элемент для кнопки @ ErtuğrulAltınboğa – Fissio

Вы можете попробовать это ниже код,

 <div class="tooltip-wrapper" ng-repeat="item in itemDetails" title=" 
      {{item.name + (isDisabled(item.name)?' is not available' : '')}}"> 
     <button ng-disabled="isDisabled(item.name)" class="btn btn-primary" 
      ng-click="select(item)">{{item.name}}</button> 
     </div>

демо: http://plnkr.co/edit/Hh1kH7HLatrQj76gFQ2E?p=preview

источник

2017-04-10 08:02:24

Как включить Bootstrap Tooltip на отключенной кнопке с помощью AngularJS?

ответ

Смежные вопросы