elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Tutorial básico de Quickjs


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] Inicializar bootstrap-tooltip en Bootstrap v3.0.3
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] Inicializar bootstrap-tooltip en Bootstrap v3.0.3  (Leído 3,518 veces)
DarK_FirefoX


Desconectado Desconectado

Mensajes: 1.263


Be the change you wanna see in te world


Ver Perfil
[Resuelto] Inicializar bootstrap-tooltip en Bootstrap v3.0.3
« en: 6 Abril 2015, 17:28 pm »

El problema es el siguiente:

Bootstrap v.3.0.3 trae consigo un plug-in llamado bootstrap-tooltip, que lo que hace es mostrar un pequeño globo para mostrar alguna información al pararse encima de algun componente, estoy tratando de mostrarlo encima de un botón.

Verán, tengo el siguiente código:

Código
  1. <form action='action.php' method='post'>
  2. <div>
  3. <button class='btn btn-danger btn-sm' type='submit' name='message_delete_submit' data-toggle='tooltip' data-placement='right' title='¿Eliminar? No se puede deshacer'>
  4. <span class='glyphicon glyphicon-trash'></span>
  5. </div>

Pero, el tooltip no se muestra con los efectos del plug-in.

Ahora, según la documentación de Bootstrap v.3.0.3 sobre el plug-in:

Citar
Opt-in functionality

For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

Citar
Funcionalidad opcional

Por razones de rendimiento, Las data-apis de Tooltip and Popover son opcionales, lo cuál significa que usted debe inicializarlas

Ahora, mi pregunta ¿Como la inicializo?

Entonces, me encontré con una cosa en el código fuente de la documentación, en donde ponen la demostración de los ToolTips, incluyen los componentes dentro de:

Código
  1. <div class="tooltip-demo">
  2. </div>

Entonces buscando, vi que ellos utilizan un archivo application.js, que según los comentarios que tiene, dice que no se debe utilizar este archivo, es solo para la documentación de ellos. Pero ahi encontré esto(entre otras cosas):

Código
  1. // tooltip demo
  2.    $('.tooltip-demo').tooltip({
  3.      selector: "[data-toggle=tooltip]",
  4.      container: "body"
  5.    })
  6.  
  7. $('.tooltip-test').tooltip()

En resumen. Esto significa que lo están inicializando? Hay que inicializarlo desde un archivo .js o script? Como lo puedo hacer?

Aclaro, que incluyendo ese archivo (application.js) en mi página y utilizando la clase "tooltip-demo", si funciona. Pero quiero saber como inicializarlo.

Espero puedan ayudarme, traté de explicarme lo mejor posible, pero si tienen alguna duda sobre lo que pregunto me lo dicen.

Gracias de antemano.

Modifico:

Después de mucho rato probando cosas y buscando, di con la solución. Resulta que tengo que, como bien dice la documentación de Bootstrap, inicializarlo. Creo que ellos no lo activan por defecto para evitar el manejo de eventos del mouse en todos los elementos.

Pues la manera de inicializarlo que utilicé fue la siguiente.

Código
  1. <script type="text/javascript">
  2.    $(function () {
  3.        $('body').tooltip({
  4.            selector: 'a[rel="tooltip"], [data-toggle="tooltip"]'
  5.        });
  6.    });

Donde utilizo como selector para que funcione el atributo [rel = tooltip] para las etiquetas a y el [data-toggle = tooltip] para otros componentes.

Salu2s


« Última modificación: 8 Abril 2015, 22:37 pm por #!drvy » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Bootstrap
Desarrollo Web
kakashi20 5 3,153 Último mensaje 13 Junio 2014, 06:29 am
por flacc
Vulnerabilidad, admin panel Bootstrap
Bugs y Exploits
Kelys 1 3,049 Último mensaje 13 Junio 2014, 06:35 am
por MCKSys Argentina
bootstrap con treeGrid
Desarrollo Web
fdap91 1 2,286 Último mensaje 22 Agosto 2014, 17:43 pm
por robe007
Ayuda con date picker de bootstrap, no lo consigo :-(
Desarrollo Web
exploiterstack 2 2,722 Último mensaje 11 Diciembre 2014, 13:08 pm
por exploiterstack
Nuevo con bootstrap
Desarrollo Web
zaphiel 4 3,192 Último mensaje 15 Junio 2015, 21:35 pm
por zaphiel
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines