Использование всплывающей подсказки 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>

Простой ответ - использование UI Bootstrap ( ui.bootstrap.tooltip )

Кажется, на этот вопрос есть несколько очень сложных ответов. Вот что у меня сработало.

1. Установите UI Bootstrap -$ bower install angular-bootstrap

2. Ввести UI Bootstrap как зависимость - 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, но есть много веских причин избегать его в пользу парадигм, основанных на Angular. Вы можете продолжать использовать стили, предоставляемые bootstrap, но замените плагины jQuery на собственные angular с помощью UI Bootstrap.

Включите файлы Boostrap CSS, 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']);

Затем вы можете использовать директивы angular вместо атрибутов данных, выбранных 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 (94kb) + Bootstrap.min.js (32kb) также дает вам больше, чем вам нужно, и намного больше, чем ui-bootstrap.min.js (41kb) .

И время, потраченное на загрузку модулей, - это только один аспект производительности.

Если вы действительно хотите загрузить только необходимые модули, вы можете «Создать сборку» и выбрать всплывающие подсказки на веб-сайте 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 UI ( 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')(спасибо user1191559 за это обновление )

Просто добавьте 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 UI
• Bootstap

Это проверено и протестировано

Прочтите это, только если вы назначаете всплывающие подсказки динамически

т.е. <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удалял свойство (иногда), когда я активировал toooltips. Однако, когда my title={{ person.tooltip }}изменит, новое значение не всегда будет обновлено в свойстве data-original-title. Я попытался деактивировать всплывающие подсказки и повторно активировать их, уничтожить, напрямую привязать к этому свойству ... все. Однако каждый из них либо не работал, либо создавал новые проблемы; такие , как titleи 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, это поздний ответ, но я подумал, поскольку это лучший голос, я должен указать на это.

установить зависимости:

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>