style - modal bootstrap angularjs

Usando Bootstrap Tooltip con AngularJS (17)

Solo lea esto si está asignando tooltips dinámicamente

es decir, <div tooltip={{ obj.somePropertyThatMayChange }} ...></div>

Tuve un problema con las sugerencias de herramientas dinámicas que no siempre se actualizaban con la vista. Por ejemplo, estaba haciendo algo como esto:

Esto no funcionó consistentemente

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

Y activándolo así:

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

Sin embargo, como mi matriz de personas cambiaría, mis tooltips no siempre se actualizarían. Intenté cada solución en este hilo y otros sin suerte. El error parecía estar ocurriendo solo alrededor del 5% del tiempo, y era casi imposible de repetir.

Lamentablemente, estos consejos de herramienta son esenciales para mi proyecto, y mostrar una información de herramienta incorrecta podría ser muy malo.

Lo que parecía ser el problema

Bootstrap estaba copiando el valor de la propiedad del title a un nuevo atributo, data-original-title y eliminando la propiedad del title (a veces) cuando activaría los toooltips. Sin embargo, cuando mi title={{ person.tooltip }} cambie, el nuevo valor no siempre se actualizará en la propiedad data-original-title . Intenté desactivar los tooltips y reactivarlos, destruirlos, enlazar directamente a esta propiedad ... todo. Sin embargo, cada uno de estos tampoco funcionó o creó nuevos problemas; como los atributos title y data-original-title ambos eliminados y desvinculados de mi objeto.

Que funcionó

Tal vez el código más feo que he utilizado, pero resolvió este problema pequeño pero sustancial para mí. Ejecuto este código cada vez que la información sobre herramientas se actualiza con nuevos datos:

$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);

Lo que está sucediendo aquí en esencia es:

Espere un tiempo (1500 ms) para completar el ciclo de resumen y actualice el title .
Si hay una propiedad de title que no está vacía (es decir, ha cambiado), cópiela a la propiedad data-original-title para que sea recogida por las herramientas de Bootstrap.
Reactivar la información sobre herramientas

Espero que esta respuesta larga ayude a alguien que puede haber estado luchando como yo.

Intento usar la información sobre herramientas de Bootstrap en una aplicación mía. Mi aplicación usa AngularJS Actualmente, tengo lo siguiente:

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

Creo que necesito usar

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

Sin embargo, no estoy seguro. Incluso cuando agrego la línea de arriba, mi código no funciona. Estoy tratando de evitar el uso de UI bootstrap ya que tiene más de lo que necesito. Sin embargo, si tuviera que incluir solo la información sobre herramientas, estaría abierto a eso. Sin embargo, no puedo encontrar la manera de hacerlo.

¿Puede alguien mostrarme cómo hacer que Bootstrap Tooltip trabaje con AngularJS?

¿Ha incluido el Bootstrap JS y 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>

Si aún no los carga, la interfaz de usuario angular ( http://angular-ui.github.io/bootstrap/ ) puede no tener demasiados gastos generales. Lo uso con mi aplicación Angular, y tiene una directiva Tooltip. Intenta usar 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>

AngularStrap no funciona en IE8 con angularjs versión 1.2.9, así que no lo use si su aplicación necesita ser compatible con IE8

Escribí una directiva angular sencilla que nos ha estado funcionando bien.

Aquí hay una demostración: http://jsbin.com/tesido/edit?html,js,output

Directiva :

// registers native Twitter Bootstrap 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'']; }); } });

Simplemente agregue bootstrap-tooltip como un atributo a cualquier elemento con un title . Angular supervisará los cambios en el title pero, de lo contrario, pasará el control de información sobre herramientas a Bootstrap.

Esto también le permite usar cualquiera de las opciones nativas de Bootstrap Tooltip como atributos de data- en el modo Bootstrap normal.

Marcado

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

Claramente, esto no tiene todos los enlaces elaborados y la integración avanzada que AngularStrap y UI Bootstrap ofrecen, pero es una buena solución si ya está usando Bootstrap''s JS en su aplicación Angular y solo necesita un puente de información básica sobre toda su aplicación sin modificando controladores o administrando eventos de mouse.

La forma más fácil, agregue $("[data-toggle=tooltip]").tooltip(); al controlador en cuestión.

La mejor solución que he podido encontrar es incluir un atributo "onmouseenter" en tu elemento como este:

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

Para que la información sobre herramientas funcione en primer lugar, debes inicializarla en tu código. Haciendo caso omiso de AngularJS por un segundo, así es como obtendría información sobre herramientas para trabajar en jQuery:

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

Esto también funcionará en una aplicación AngularJS siempre que no sea contenido procesado por Angular (por ejemplo: ng-repeat). En ese caso, debe escribir una directiva para manejar esto. Aquí hay una directiva simple que funcionó para mí:

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''); }); } }; });

Entonces, todo lo que tiene que hacer es incluir el atributo "información sobre herramientas" en el elemento sobre el que desea que aparezca la información sobre herramientas:

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

¡Espero que ayude!

Por favor, recuerde una cosa si quiere usar la información sobre herramientas bootstrap en angularjs es el orden de sus scripts si también está usando jquery-ui, debería ser:

jQuery
jQuery UI
Bootstap

Es probado

Pruebe la información sobre herramientas (ui.bootstrap.tooltip). Ver directivas angulares para Bootstrap

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

Se recomienda evitar el código JavaScript en la parte superior de AngularJS

Puede usar la opción selector para aplicaciones dinámicas de una sola página:

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

si se proporciona un selector, los objetos de información sobre herramientas se delegarán en los objetivos especificados. En la práctica, esto se usa para habilitar el contenido HTML dinámico para agregar tooltips.

Puedes crear una directiva simple como esta:

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

Luego, agregue su directiva personalizada donde sea necesario:

<button my-tooltip></button>

Puedes hacer esto con AngularStrap que

es un conjunto de directivas nativas que permite una integración perfecta de Bootstrap 3.0+ en su aplicación AngularJS 1.2+. "

Puede inyectar toda la biblioteca de esta manera:

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

O solo ingrese la característica de información sobre herramientas de esta manera:

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

Demostración en Stack Snippets

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

Si está compilando una aplicación Angular, puede usar jQuery, pero hay muchas buenas razones para intentar evitarla en favor de paradigmas más angulares. Puede seguir utilizando los estilos proporcionados por bootstrap, pero reemplace los complementos de jQuery con angulos nativos usando UI Bootstrap

Incluya los archivos CSS de Boostrap, Angular.js y 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>

Asegúrate de haber inyectado ui.bootstrap cuando crees tu módulo de esta manera:

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

Entonces puede usar directivas angulares en lugar de atributos de datos recogidos por 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>

Demostración en Plunker

Evitar el Bootstrap de UI

jQuery.min.js (94kb) + Bootstrap.min.js (32kb) también le brinda más de lo que necesita y mucho más que ui-bootstrap.min.js (41kb) .

Y el tiempo dedicado a descargar los módulos es solo un aspecto del rendimiento.

Si realmente desea cargar solo los módulos que necesita, puede "Crear una compilación" y elegir información sobre herramientas del sitio web de Bootstrap-UI . O puede explorar el código fuente de la información sobre herramientas y seleccionar lo que necesita.

Aquí una compilación personalizada miniaturizada con solo la información sobre herramientas y plantillas (6kb)

aprobando @aStewartDesign respuesta:

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

No hay necesidad de jquery, es un artículo de última hora, pero pensé que dado que es el mejor votado, debería señalar esto.

instalar las dependencias:

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

A continuación, agregue scripts en su 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" ]

luego, crea un script.js

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

ahora reinicia tu servidor.

Respuesta simple - usando UI Bootstrap ( ui.bootstrap.tooltip )

Parece que hay un montón de respuestas muy complejas a esta pregunta. Esto es lo que funcionó para mí.

Instalar UI Bootstrap - $ bower install angular-bootstrap
Inyectar UI Bootstrap como una dependencia - angular.module(''myModule'', [''ui.bootstrap'']);
Use la ui.bootstrap.tooltip en su html.

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

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