Información sobre herramientas con Twitter Bootstrap

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

Estoy un poco confundido acerca de la información sobre herramientas. Ellos son cubierto en la documentación pero Twitter asume cierto conocimiento. Por ejemplo, dicen activar la información sobre herramientas con el siguiente código JavaScript.

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

Después de hurgar en su fuente, me di cuenta de que los campos con información sobre herramientas deben estar en una clase y ejecutar el siguiente código.

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

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

preguntado el 03 de mayo de 12 a las 18:05

7 Respuestas

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

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

Entonces puede activar todos los enlaces con el .link clase adjunta como información sobre herramientas así:

$('.link').tooltip()

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

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

Y sus enlaces se verían así:

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

Por supuesto, también puede usar una clase de contenedor o una identificación para orientar su información sobre herramientas dentro de un contenedor específico que desea destacar con una opción específica o separar del resto de su contenido y puede usarlo así:

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

Este selector apuntará a toda su información sobre herramientas con el rel atributo "dentro" de su #example div, de esta manera puede agregar estilos u opciones especiales solo a esa sección. En resumen, puede usar prácticamente cualquier selector válido para orientar su información sobre herramientas y no hay necesidad de ensuciar su marcado con una clase adicional para orientarlos.

contestado el 03 de mayo de 12 a las 20:05

¡Perfecto! ¿Hay algún problema de rendimiento con $('[rel=tooltip]').tooltip()? - schmmd

@schmmd no veo ninguna razón por la que habrá un impacto en el rendimiento, a menos que tenga 100 mil información sobre herramientas para seleccionar, así que no hay mucho de qué preocuparse, es un selector de atributos como CSS. - Andrés Ilich

puede que no te importe la semántica, pero idealmente rel es mejor reservarlo para esos fines y class podría ser mejor aquí, mira stackoverflow.com/questions/15214776/… - cboettig

gran consejo sobre el rel="tooltip"! - Jack James

Es mejor usar data-rel="tooltip" en lugar de rel="tooltip" para cumplir con los estándares HTML. - minombretechno

La forma más fácil de usar esto es

pon esto en el encabezado:

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

y entonces

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

entonces con ese código js si tiene una etiqueta en cualquier lugar de su página con rel="tooltip" obtener la información sobre herramientas de arranque.

buena suerte.

Respondido el 19 de diciembre de 14 a las 21:12

Agrega esto en tu encabezado

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

Luego solo agrega el atributo title="your tooltip" a cualquier elemento

Respondido 30 Oct 13, 15:10

esto funciona para mí, actualmente la información sobre herramientas aparece en la parte superior del elemento. ¿Cómo lo cambio para que la información sobre herramientas aparezca en la parte inferior? - Muhammed Bhikha

Incluí el archivo JS y CSS y me preguntaba por qué no funciona, lo que hizo que funcionara fue cuando agregué lo siguiente en <head>:

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

Respondido el 29 de diciembre de 12 a las 10:12

Simplemente marque todos los conmutadores de datos...

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

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

Respondido 18 Jul 14, 23:07

Eso es porque estas cosas (me refiero a la información sobre herramientas, etc.) son complementos de 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. ¿Quizás esperabas que Bootstrap hiciera automáticamente algo de magia? Sin embargo, esta magia también puede causar muchos problemas (efectos secundarios no deseados).

Esta magia se puede lograr fácilmente con sólo escribir $(".myclass").tooltip(), esta línea de código hace exactamente lo que quieres. Lo único que tiene que hacer es adjuntar la clase myclass a aquellos elementos que necesitan aplicar la información sobre herramientas. (Solo asegúrese de ejecutar esa línea de código después de que se haya cargado su DOM. Consulte a continuación).

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

EDITAR: aparentemente no puedes usar la clase información sobre herramientas (¡probablemente porque se usa internamente en algún lugar!).

Me pregunto por qué Bootstrap no ejecuta el código que especificó con alguna clase que pueda incluir.

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

respondido 18 nov., 12:15

Para tu información, esto es en realidad una de las primeras cosas que probé. No puedes usar la clase tooltip. Borra el contenido de la etiqueta. me cambié a tooltiparea. - schmmd

No esperaba magia, solo me pregunto por qué Bootstrap no ejecuta el código que especificaste con alguna clase que puedo incluir. - schmmd

Uso simple de esto:

<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 puede simplemente agregar this->data-placement="left"

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

Respondido el 29 de Septiembre de 15 a las 21:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.