Використання підказки Bootstrap із AngularJS

Я намагаюся використати підказку Bootstrap у своєму додатку. У моєму додатку використовується AngularJS На даний момент я маю таке:

<button type="button" class="btn btn-default" 
        data-toggle="tooltip" data-placement="left"
        title="Tooltip on left">
            Tooltip on left
</button>

Я думаю, мені потрібно використовувати

$("[data-toggle=tooltip]").tooltip();

Однак я не впевнений. Навіть коли я додаю рядок вище, мій код не працює. Я намагаюся уникати використання інтерфейсу завантаження, оскільки він має більше, ніж мені потрібно. Однак, якби мені довелося включити лише підказку, я був би до цього відкритий. Проте я не можу зрозуміти, як це зробити.

Хтось може показати мені, як змусити підказку Bootstrap працювати з AngularJS?

Для того, щоб спочатку підказки запрацювали, вам потрібно їх ініціалізувати у своєму коді. Ігноруючи AngularJS на секунду, ось як ви отримаєте підказки для роботи в jQuery:

$(document).ready(function(){
    $('[data-toggle=tooltip]').hover(function(){
        // on mouseenter
        $(this).tooltip('show');
    }, function(){
        // on mouseleave
        $(this).tooltip('hide');
    });
});

Це також буде працювати в програмі AngularJS, якщо це не вміст, який відображає Angular (наприклад: ng-repeat). У цьому випадку вам потрібно написати директиву, щоб вирішити це. Ось проста директива, яка мені працювала:

app.directive('tooltip', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            element.hover(function(){
                // on mouseenter
                element.tooltip('show');
            }, function(){
                // on mouseleave
                element.tooltip('hide');
            });
        }
    };
});

Тоді все, що вам потрібно зробити, це включити атрибут "підказка" до елемента, на якому ви хочете, щоб підказка відображалася:

<a href="#0" title="My Tooltip!" data-toggle="tooltip" data-placement="top" tooltip>My Tooltip Link</a>

Сподіваюся, це допоможе!

Найкраще рішення, яке мені вдалося придумати, - це включити атрибут "onmouseenter" до вашого елементу так:

<button type="button" class="btn btn-default" 
    data-placement="left"
    title="Tooltip on left"
    onmouseenter="$(this).tooltip('show')">
</button>

Проста відповідь - використання інтерфейсу Bootstrap ( ui.bootstrap.tooltip )

Здається, на це питання є купа дуже складних відповідей. Ось, що мені вдалося.

1. Встановити завантажувальний інтерфейс інтерфейсу користувача -$ bower install angular-bootstrap

2. Введіть завантажувальний інтерфейс інтерфейсу користувача як залежність - angular.module('myModule', ['ui.bootstrap']);

3. Використовуйте директиву uib-tooltip у своєму html.

<button class="btn btn-default"
        type="button"
        uib-tooltip="I'm a tooltip!">
     I'm a button!
</button>

Якщо ви створюєте програму Angular, ви можете використовувати jQuery, але є маса вагомих причин, щоб спробувати уникнути її на користь більш кутових парадигм. Ви можете продовжувати використовувати стилі, надані bootstrap, але замінити плагіни jQuery на рідні angular за допомогою інтерфейсу Bootstrap

Включіть файли CSS Boostrap, Angular.js та ui.Bootstrap.js:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.angularjs.org/1.2.20/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

Переконайтесь, що ви зробили ін’єкцію, ui.bootstrapколи створюєте свій модуль таким чином:

var app = angular.module('plunker', ['ui.bootstrap']);

Тоді ви можете використовувати кутові директиви замість атрибутів даних, підібраних jQuery:

<button type="button" class="btn btn-default" 
        title="Tooltip on left" data-toggle="tooltip" data-placement="left"
        tooltip="Tooltip on left" tooltip-placement="left" >
  Tooltip on left
</button>

Демонстрація в Plunker

Уникання завантаження інтерфейсу користувача

jQuery.min.js (94 кб) + Bootstrap.min.js (32 кб) також надає вам більше, ніж потрібно, і набагато більше, ніж ui-bootstrap.min.js (41 кб) .

А час, витрачений на завантаження модулів, є лише одним із аспектів продуктивності.

Якщо ви дійсно хотіли завантажити лише потрібні вам модулі, ви можете "Створити збірку" та вибрати підказки на веб-сайті Bootstrap-UI . Або ви можете вивчити вихідний код для підказок та вибрати те, що вам потрібно.

Тут мінімізована спеціальна збірка лише із підказками та шаблонами (6 кб)

Ви включили Bootstrap JS та jQuery?

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

Якщо ви їх ще не завантажуєте, то інтерфейс Angular ( http://angular-ui.github.io/bootstrap/ ) може не мати великих витрат. Я використовую це з моїм додатком Angular, і він має директиву Tooltip. Спробуйте використовуватиtooltip="tiptext"

<button type="button" class="btn btn-default" 
        data-toggle="tooltip" data-placement="left"
        title="Tooltip on left"
        tooltip="This is a Bootstrap tooltip"
        tooltip-placement="left" >
            Tooltip on left
</button>

Я написав просту директиву Angular, яка добре працює для нас.

Ось демо: http://jsbin.com/tesido/edit?html,js,output

Директива (для Bootstrap 3) :

// registers native Twitter Bootstrap 3 tooltips
app.directive('bootstrapTooltip', function() {
  return function(scope, element, attrs) {
    attrs.$observe('title',function(title){
      // Destroy any existing tooltips (otherwise new ones won't get initialized)
      element.tooltip('destroy');
      // Only initialize the tooltip if there's text (prevents empty tooltips)
      if (jQuery.trim(title)) element.tooltip();
    })
    element.on('$destroy', function() {
      element.tooltip('destroy');
      delete attrs.$$observers['title'];
    });
  }
});

Примітка: Якщо ви використовуєте Bootstrap 4, у рядках 6 та 11 вище вам потрібно буде замінити tooltip('destroy')на tooltip('dispose')(Дякую користувачу1191559 за оновлення )

Просто додайте bootstrap-tooltipяк атрибут до будь-якого елемента з title. Angular контролюватиме зміни в, titleале в іншому випадку передаватиме підказку в Bootstrap.

Це також дозволяє використовувати будь-який власний параметр підказки Bootstrap як data-атрибути звичайним способом Bootstrap.

Розмітка :

<div bootstrap-tooltip data-placement="left" title="Tooltip on left">
        Tooltip on left
</div>

Очевидно, що тут відсутні всі складні прив’язки та розширена інтеграція, які пропонують AngularStrap та UI Bootstrap, але це гарне рішення, якщо ви вже використовуєте JS Bootstrap у своєму додатку Angular, і вам просто потрібен базовий міст підказки для всього вашого додатку без модифікація контролерів або управління подіями миші.

Ви можете використовувати selector опцію для динамічних односторінкових додатків:

jQuery(function($) {
    $(document).tooltip({
        selector: '[data-toggle="tooltip"]'
    });
});

якщо надано селектор, об’єкти підказки будуть делеговані зазначеним цілям. На практиці це використовується для того, щоб динамічний вміст HTML додавав підказки.

Ви можете створити таку просту директиву:

angular.module('myApp',[])
    .directive('myTooltip', function(){
        return {
            restrict: 'A',
            link: function(scope, element){
                element.tooltip();
            }
        }
    });

Потім додайте власну директиву, де це необхідно:

<button my-tooltip></button>

Ви можете зробити це з AngularStrap , які

- це набір власних директив, що дозволяє безперешкодно інтегрувати Bootstrap 3.0+ у ваш додаток AngularJS 1.2+ ".

Ви можете ввести всю бібліотеку так:

var app = angular.module('MyApp', ['mgcrea.ngStrap']); 

Або лише втягніть функцію підказки наступним чином:

var app = angular.module('MyApp', ['mgcrea.ngStrap.tooltip']); 

Демонстрація у фрагментах стека

var app = angular.module('MyApp', ['mgcrea.ngStrap']);  

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl.min.js"></script>

<div ng-app="MyApp" class="container" >

  <button type="button" 
          class="btn btn-default" 
          data-trigger="hover" 
          data-placement="right"
          data-title="Tooltip on right"
          bs-tooltip>
    MyButton
  </button>

</div>

найпростіший спосіб, додати $("[data-toggle=tooltip]").tooltip();до відповідного контролера.

Будь ласка, пам’ятайте одну річ, якщо ви хочете використовувати підказку завантажувальної стрічки в angularjs - це порядок ваших скриптів, якщо ви також використовуєте jquery-ui, це має бути:

• jQuery
• Інтерфейс jQuery
• Підніжка

Це перевірено

Прочитайте це, лише якщо ви призначаєте підказки динамічно

тобто <div tooltip={{ obj.somePropertyThatMayChange }} ...></div>

У мене виникла проблема з динамічними підказками, які не завжди оновлювались у поданні. Наприклад, я робив щось подібне:

Це не працювало постійно

<div ng-repeat="person in people">
    <span data-toggle="tooltip" data-placement="top" title="{{ person.tooltip }}">
      {{ person.name }}
    </span> 
</div> 

І активуючи його так:

$timeout(function() {
  $(document).tooltip({ selector: '[data-toggle="tooltip"]'});
}, 1500)

Однак, оскільки мій масив людей міняв би зміни, мої підказки не завжди оновлювались. Я пробував усі виправлення в цій темі та інші, не маючи удачі. Здавалося, збій траплявся лише близько 5% часу, і майже неможливо було повторити його.

На жаль, ці підказки є критично важливими для мого проекту, і показ неправильної підказки може бути дуже поганим.

Те, що, здавалося, було проблемою

Bootstrap копіював значення titleвластивості в новий атрибут data-original-titleі titleвидаляв властивість (іноді), коли я активував занадто підказки. Однак, коли я title={{ person.tooltip }}міняв би нове значення, не завжди було б оновлено властивість data-original-title. Я спробував деактивувати підказки та знову активувати їх, знищити, прив’язавши до цієї властивості безпосередньо ... все. Однак кожен з них або не працював, або створював нові випуски; такі як атрибути titleand, data-original-titleяк видалені, так і розв’язані з мого об’єкта.

Що вдалося

Мабуть, найпотворніший код, який я коли-небудь просував, але він вирішив цю невелику, але істотну проблему для мене. Я запускаю цей код кожного разу, коли підказка оновлюється новими даними:

$timeout(function() {
    $('[data-toggle="tooltip"]').each(function(index) {
      // sometimes the title is blank for no apparent reason. don't override in these cases.
      if ($(this).attr("title").length > 0) {
        $( this ).attr("data-original-title", $(this).attr("title"));
      }
    });
    $timeout(function() {
      // finally, activate the tooltips
      $(document).tooltip({ selector: '[data-toggle="tooltip"]'});
    }, 500);
}, 1500);

По суті, тут відбувається:

• Зачекайте деякий час (1500 мс), щоб завершився цикл дайджесту та titleоновлення s.
• Якщо є titleвластивість, яка не є порожньою (тобто вона змінилася), скопіюйте її у data-original-titleвластивість, щоб вона була підхоплена занадто високими клавішами Bootstrap.
• Повторно активуйте підказки

Сподіваюся, ця довга відповідь допоможе людині, яка, можливо, боролася, як і я.

Спробуйте підказку (ui.bootstrap.tooltip). Див. Директиви Angular щодо Bootstrap

<button type="button" class="btn btn-default" tooltip-placement="bottom" uib-tooltip="tooltip message">Test</button>

Рекомендується уникати коду JavaScript у верхній частині AngularJS

для отримання підказки для оновлення при зміні моделі я просто використовую data-original-titleзамість title.

напр

<i class="fa fa-gift" data-toggle="tooltip" data-html="true" data-original-title={{getGiftMessage(gift)}} ></i>

зверніть увагу, що я ініціалізую використання таких підказок:

<script type="text/javascript">
    $(function () {
        $("body").tooltip({ selector: '[data-toggle=tooltip]' });
    })
</script>

версії:

• AngularJS 1.4.10
• завантажувальний ремінь 3.1.1
• jquery: 1.11.0

AngularStrap не працює в IE8 з angularjs версії 1.2.9, тому не використовуйте це, якщо ваша програма повинна підтримувати IE8

поліпшення відповіді @aStewartDesign:

.directive('tooltip', function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs){
      element.hover(function(){
        element.tooltip('show');
      }, function(){
        element.tooltip('hide');
      });
    }
  };
});

Немає необхідності в jquery, це пізній anwser, але я зрозумів, що, оскільки голосує за голосування, я повинен зазначити це.

встановити залежності:

npm install jquery --save
npm install tether --save
npm install bootstrap@version --save;

далі, додайте скрипти у ваш angular-cli.json

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "script.js"
    ]

потім створіть script.js

$("[data-toggle=tooltip]").tooltip();

тепер перезапустіть сервер.

Через функцію підказки ви повинні сказати angularJS, що використовуєте jQuery.

Це ваша директива:

myApp.directive('tooltip', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('mouseenter', function () {
                jQuery.noConflict();
                (function ($) {
                    $(element[0]).tooltip('show');
                })(jQuery);
            });
        }
    };
});

і ось як використовувати директиву:

<a href="#" title="ToolTip!" data-toggle="tooltip" tooltip></a>