Tooltips con Twitter Bootstrap

Question

Estoy usando Twitter Bootstrap, ¡y no soy un desarrollador de frontend! Sin embargo, está haciendo que el proceso casi, me atrevo a decir, ¡sea divertido!

Estoy un poco confundido acerca de información sobre herramientas. Son covered in the documentation pero Twitter asume algún conocimiento. Por ejemplo, dicen que activan la información sobre herramientas con el siguiente código JavaScript.

$('#example').tooltip(options) 

Después de hurgar en su origen, me di cuenta que los campos con la información de herramientas que tenga que estar en una clase y tienen el siguiente código se ejecute.

$('.tooltipclass').tooltip(options) 

Pero ahora mi pregunta es, ¿por qué no Twitter Bootstrap proporcionar dicha clase tooltip? Solo para permitir una mayor configuración? ¿Es mejor agregar los elementos individuales con información sobre herramientas al tooltipclass, o debería agregar el área circundante al tooltipclass? ¿Importa si uso un identificador de clase (.class) en lugar de un identificador de nombre (#name)?

Answer 1

Creo que su pregunta se reduce a qué selector adecuado utilizar al configurar su información sobre herramientas, y la respuesta a eso es casi lo que quiera.Si desea utilizar una clase para activar sus información sobre herramientas que se pueden hacer eso, tome la siguiente, por ejemplo:

<a href="#" class="link" data-original-title="first tooltip">Hover me for a tooltip</a> 

A continuación, puede desencadenar todos los vínculos con la clase .link adjunta como información sobre herramientas de este modo:

$('.link').tooltip() 

Ahora, para responder a su pregunta de por qué los desarrolladores de arranque no usaron una clase para activar información sobre herramientas porque no se necesita exactamente, puede usar prácticamente cualquier selector al que desee orientar su información sobre herramientas, como (mi personal favorito) el atributo rel. Con este atributo puede orientar todos los enlaces o elementos con el conjunto rel propiedad a tooltip, así:

$('[rel=tooltip]').tooltip() 

y sus enlaces se vería algo como esto:

<a href="#" rel="tooltip" data-original-title="first tooltip">Hover me for a tooltip</a> 

Por supuesto, se puede también use una clase de contenedor o ID para orientar su información sobre herramientas dentro de un contenedor específico que quiera seleccionar con una opción específica o para separarlo del resto de su contenido y puede usarlo de la siguiente manera:

$('#example').tooltip({ 
    selector: "a[rel=tooltip]" 
}) 

Este selector dirigirá todas sus sugerencias con el atributo rel "dentro" de su div #example, de esta manera puede agregar estilos u opciones especiales solo para esa sección. En resumen, puede utilizar prácticamente cualquier selector válido para orientar su información sobre herramientas y no hay necesidad de ensuciar su marcado con una clase extra para dirigirse a ellos.

Answer 2

Eso es porque estas cosas (me refiero a la información sobre herramientas, etc.) son complementos jQuery. Y sí, asumen algunos conocimientos básicos sobre jQuery. Le sugiero que busque al menos un tutorial básico sobre jQuery.

Siempre tendrá que definir qué elementos deben tener una información sobre herramientas. Y no entiendo por qué Bootstrap debería proporcionar la clase, usted define esas clases o usted mismo. Tal vez estabas esperando que ese bootstrap automáticamente hiciera algo de magia? Sin embargo, esta magia también puede causar muchos problemas (efectos secundarios no deseados).

Esta magia se puede lograr fácilmente simplemente escribiendo $(".myclass").tooltip(), esta línea de código hace exactamente lo que quiere. Lo único que tienes que hacer es adjuntar la clase myclass a los elementos que necesitan aplicar el tooltip thingy. (Sólo asegúrese de ejecutar esa línea de código después de la DOM se ha cargado Véase a continuación..)

$(document).ready(function() { 
    $(".myclass").tooltip(); 
}); 

EDIT: al parecer, no se puede utilizar la información sobre herramientas de clase (probablemente debido a que se utiliza internamente en algún lugar!)

Me pregunto por qué bootstrap no ejecuta el código especificado con alguna clase que puedo incluir.

Lo que desea produce casi el mismo código que tiene que hacer ahora. Sin embargo, la razón más importante por la que no hicieron eso es porque causa muchos problemas. Una persona quiere asignarlo a un elemento con una ID; otros quieren asignarlo a elementos con un nombre de clase especificado; y de nuevo, otros quieren asignarlo a un elemento específico logrado a través de algún proceso de selección. Esas 3 opciones causan complejidad adicional, mientras que ya está provisto por jQuery. No he visto muchos complementos que hagan lo que quieres (solo porque es innecesario, realmente no te ahorra código).

Answer 3

La forma más fácil de utilizar este es

poner esto en la cabecera:

<script> 
    $(function ($) { 
     $("a").tooltip() 
    }); 
</script> 

y luego

<a href="#" rel="tooltip" data-placement="bottom" title="My Tooltip Text"> 
    My link text 
</a> 

así que con eso js código Si tiene la etiqueta en cualquier lugar en su página con rel="tooltip" obtener la información sobre herramientas bootstrap.

buena suerte.

Answer 4

que incluía el archivo JS y CSS, y se preguntaba por qué no está funcionando, lo que hizo que el trabajo fue cuando añadió lo siguiente en <head>:

<script> 
jQuery(function ($) { 
    $("a").tooltip() 
}); 
</script> 

Answer 5

Añadir esto en su cabecera

<script> 
    //tooltip 
    $(function() { 
     var tooltips = $("[title]").tooltip(); 
     $(document)(function() { 
      tooltips.tooltip("open"); 
     }); 
    }); 
</script> 

Entonces sólo tiene que añadir el atributo title="your tooltip" a cualquier elemento

Answer 6

uso de este simple:

<a href="#" id="mytooltip" class="btn btn-praimary" data-toggle="tooltip" title="my tooltip"> 
    tooltip 
</a> 

Usando jQuery:

$(document).ready(function(){ 
    $('#mytooltip').tooltip(); 
}); 

Puede lado izquierdo de la información sobre herramientas u puede agregar sencilla this->data-placement="left"

<a href="#" id="mytooltip" class="btn btn-praimary" data-toggle="tooltip" title="my tooltip" data-placement="left">tooltip</a> 

Answer 7

Simplemente marque todas la ficha alterna ...

jQuery(function() { 
    jQuery('[data-toggle=tooltip]').tooltip(); 
}); 

http://jsfiddle.net/Amged/xUQ6D/19/