twitter-bootstrap - tooltips - tooltip label bootstrap

La información sobre herramientas de arranque no funciona

Question

Me estoy volviendo loca aquí.

Tengo el siguiente HTML:

<a href="#" rel="tooltip" title="A nice tooltip">test</a>

Y la información sobre herramientas de estilo Bootstrap se niega a mostrar, solo una información sobre herramientas normal.

Tengo bootstrap.css funcionando bien, y puedo ver las clases allí.

Tengo todos los archivos JS relevantes al final de mi archivo HTML:

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>

He visto la fuente del ejemplo de Bootstrap y no puedo ver nada que inicie la información sobre herramientas en ningún lugar de allí. ¿Entonces supongo que debería funcionar, o me estoy perdiendo algo vital aquí?

Tengo modales, alertas y otras cosas que funcionan bien, así que no soy un imbécil total;)

¡Gracias por cualquier ayuda!

Answer 1

Acabo de añadir:

<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>

debajo de bootstrap.min.js y funciona.

Answer 2

Agregue data-toggle="tooltip" a los elementos que desee con una información sobre herramientas.

Answer 3

De la docs arranque en la información sobre herramientas

Las informaciones sobre herramientas son opcionales por razones de rendimiento, por lo que debe inicializarlas usted mismo. Una forma de inicializar todas las informaciones sobre herramientas en una página sería seleccionarlas por su atributo de alternancia de datos:

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

Answer 4

Debes poner la herramienta de herramientas javascript después del html. Me gusta esto :

<a href="#" rel="tooltip" title="Title Here"> I am Here</a>

<script>
$("* [rel=''tooltip'']").tooltip({
   html: true, 
   placement: ''bottom''
});

</script> 

O utilice $ (documento) .ready:

$(document).ready(function() {

$("* [rel=''tooltip'']").tooltip({
   html: true, 
   placement: ''bottom''
});

});

</script>

La información sobre herramientas no funciona porque coloca el código html de la información sobre herramientas antes del javascript , por lo que no saben si existe un javascript para la información sobre herramientas. En mi opinión, el guión se lee de arriba a abajo.

Answer 5

Después de experimentar el mismo problema, encontré que esta solución funcionó sin tener que agregar atributos de etiqueta adicionales fuera de los atributos requeridos de Bootstrap.

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

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

¡Espero que esto ayude!

Answer 6

En la sección de encabezado, primero debe agregar el siguiente código.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
   $(''[data-toggle="tooltip"]'').tooltip();   
});
</script>

Luego, en la sección del cuerpo debes escribir el siguiente código

<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>

Answer 7

En mi caso particular, no funcionó porque estaba incluyendo dos versiones de jQuery. Una para bootstrap, pero otra (otra versión) para Google Charts.

Cuando elimino la carga de jQuery para los gráficos, funciona bien.

Answer 8

En resumen: active su información sobre herramientas usando los selectores jQuery

<script type="text/javascript">
    $(function () {
        $("[rel=''tooltip'']").tooltip();
    });
</script>

De hecho, no necesita utilizar el selector de atributos, puede invocarlo en cualquier elemento, incluso si no tiene rel="tooltip" en su etiqueta.

Answer 9

Esta es la forma más sencilla. Solo pon esto antes </body> :

<script type="text/javascript">
    $("[data-toggle=/"tooltip/"]").tooltip();
</script>

Echa un vistazo a los ejemplos que figuran en la documentación de Bootstrap sobre información sobre herramientas .

Por ejemplo:

<a href="#"
   data-toggle="tooltip"
   data-placement="bottom"
   title="Tooltip text here">Link with tooltip</a>

Answer 10

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

$(document).ready(function() {
    $(''[data-toggle=tooltip]'').tooltip();
}); 

Este es un trabajo para mí.

Answer 11

He añadido jquery y bootstrap-tooltip.js en el encabezado. Añadir este código en el pie de página funciona para mí! pero cuando agrego el mismo código en el encabezado no funciona!

<script type="text/javascript">
$(''.some-class'').tooltip({ selector: "a" });
</script>

Answer 12

La información sobre herramientas y la ventana emergente NO son solo complementos de css como la barra desplegable o la barra de progreso. Para usar la información sobre herramientas y la ventana emergente, DEBE activarlas utilizando jquery (lea javascript).

Entonces, digamos que queremos que se muestre una ventana emergente al hacer clic en un botón html.

<a href="#" role="button" 
     class="btn popovers-to-be-activated" 
     title="" data-content="And here''s some amazing content." 
     data-original-title="A Title" "
>button</a>

Entonces necesitas tener el siguiente código javascript para activar la ventana emergente:

$(''.popovers-to-be-activated'').popover();

En realidad, el código de javascript anterior activará el popover en todos los elementos html que tienen la clase "popovers-to-be-be".

No hace falta decir que ponga el javascript anterior dentro de la devolución de llamada listo para DOM para activar todos los popovers tan pronto como DOM esté listo:

$(function() {
 // Handler for .ready() called.
 $(''.popovers-to-be-activated'').popover();
});

Answer 13

Necesitas hacer lo siguiente:

• Agregue el <script type="text/javascript"> $(function () { $("[rel=''tooltip'']").tooltip(); }); </script> <script type="text/javascript"> $(function () { $("[rel=''tooltip'']").tooltip(); }); </script> codifique en algún lugar de su página (preferiblemente en la sección <head> )
• Agregue data-toggle: "tooltip" a cualquier cosa que desee habilitar con él.

Answer 14

No necesitas todos los archivos js por separado

Solo use los siguientes archivos si va a usar todas las funciones de arranque:

-bootstrap.css
-bootstrap.js

ambos se pueden encontrar en http://twitter.github.com
y finalmente
-La versión más reciente de jquery.js

Para Glyphicons necesitas la imagen.

glyphicons-halfings.png y / o glyphicons-halfings-white.png (imágenes en color blanco)
que necesitas subir dentro de / img / folder de tu sitio web (o) almacenarlo donde quieras, pero cambiar el directorio de carpetas dentro de bootstrap.css

Para obtener información sobre herramientas, necesita el siguiente script dentro de su etiqueta <head> </head>

  <script type=''text/javascript''>
     $(document).ready(function () {
     if ($("[rel=tooltip]").length) {
     $("[rel=tooltip]").tooltip();
     }
   });
  </script>

Eso es...

Answer 15

Pon tu código dentro del documento listo

$(document).ready(function () {
    if ($("[rel=tooltip]").length) {
        $("[rel=tooltip]").tooltip();
    }
});

En mi caso, también me faltaban las clases CSS de información sobre herramientas en http://twitter.github.com/bootstrap/assets/css/bootstrap.css así que no lo olvido.

Answer 16

Sé que esta es una pregunta antigua, pero como tuve este problema con la nueva versión de bootstrap y no está claro en el sitio web, aquí está cómo habilitar la información sobre herramientas.

Da a tu elemento una clase como "tooltip-test"

luego activa esta clase en tu etiqueta javascript:

<script type="text/javascript">
    $(''.tooltip-test'').tooltip();
</script>

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>

Answer 17

Si está creando un html que contiene la información sobre herramientas con javascript y luego lo inserta en el documento, debe activar la ventana emergente / información sobre herramientas DESPUÉS de haber insertado el html en el documento, no en la carga de documentos ...

Answer 18

Si haces $("[rel=''tooltip'']").tooltip(); Como han sugerido otras respuestas, activará la información sobre herramientas solo en los elementos que actualmente existen en DOM. Eso significa que si va a cambiar DOM e insertar contenido dinámico más adelante, no funcionará. Además, esto es mucho menos eficiente porque instala el controlador de eventos para elementos individuales en lugar de usar la delegación de eventos JQuery. Entonces, la mejor manera que he encontrado para activar la información sobre herramientas de Bootstrap es esta única línea de código que puede colocar en el documento listo y olvidarse de él:

$(document.body).tooltip({ selector: "[title]" });

Tenga en cuenta que estoy usando el title como selector en lugar de rel=title o rel=title data-title . Esto tiene la ventaja de que se puede aplicar a muchos otros elementos (se supone que la rel es solo para anclajes) y también funciona como "reserva" para los navegadores antiguos.

También tenga en cuenta que no necesita el atributo data-toggle="tooltip" si está utilizando el código anterior.

La información sobre herramientas de Bootstrap es costosa porque necesita manejar los eventos del mouse en cada uno de los elementos. Esta es la razón por la que no lo han habilitado por defecto. Entonces, si alguna vez decide comentar sobre la línea anterior, su página aún funcionará si usa el atributo de título.

Si está de acuerdo en no usar el atributo de título, le recomendaría que utilice una solución CSS pura como Hint.css o visite http://csstooltip.com, que no requiere ningún código JavaScript.

Answer 19

Si todavía no se ha resuelto todo. Use la biblioteca Latest Latest Jquery, no necesita ninguno de los selectores de jquery si usa la última versión 2.0.4 y jquery-1.7.2.js

Simplemente use rel="tooltip" title="Your Title" data-placement=" "

Use arriba / abajo / izquierda / derecha en la ubicación de datos según su deseo.

Answer 20

Si usar Rails + Haml es mucho más fácil de incluir la información sobre herramientas, simplemente haga lo siguiente:

= link_to '''', some_path(), :class => "btn btn-success btn-mini icon-plane", :rel => "tooltip", :title => "Referential Guide"

Eso es simplemente agregar la siguiente línea al final del elemento.

:rel => "tooltip", :title => "Referential Guide"

Answer 21

Tuve un problema similar y especialmente si está ejecutando un contenedor de botones como un contenedor de botones vertical. En ese caso tienes que configurar el contenedor como el ''cuerpo''

I have added a jsfiddle example

example

Answer 22

Usemos un ejemplo para mostrar cómo se pueden agregar los Tooltips a cualquier elemento HTML en su documento.

NOTA:

Si estos ejemplos de información sobre herramientas no funcionan cuando los coloca en su página, entonces tiene otro problema. Necesitas mirar cosas como:

• El orden de los scripts incluidos
• Vea si está intentando inicializar los elementos HTML que se han eliminado
• Vea si está intentando llamar a métodos en archivos JS que ya no está incluyendo

• Vea si está incluyendo el archivo JS que proporciona la funcionalidad que necesita (no solo para información sobre herramientas, sino también para cualquier componente que use en la página).

  <head>
      <link rel="stylesheet" href="/Content/bootstrap.css" />
      <link rel="stylesheet" href="/Content/animate.css" />
      <link rel="stylesheet" href="/Content/style.css" />
  </head>
  <body>
      ... your HTML code ...
      <script src="/Scripts/jquery-2.1.1.js"></script>
      <script src="/Scripts/bootstrap.min.js"></script>
      <script src="/Scripts/app/inspinia.js"></script> <!-- if using INSPINIA -->
      ... your JavaScript initializers ...
  </body>

La falla de CUALQUIERA de los elementos anteriores puede (y con frecuencia lo hace) evitar que javascript se cargue y / o se ejecute, y eso mantiene todo bien y roto.

EJEMPLOS DE TRABAJO

Supongamos que tiene una insignia y desea que muestre información sobre herramientas cuando el usuario se desplace sobre ella.

HTML original:

<span class="badge badge-sm badge-plain">Admin Mode</span>

Tooltips de arranque simple

Si está creando información sobre herramientas para un elemento HTML, y está utilizando información sobre herramientas Plain Bootstrap, entonces será responsable de llamar los Inicializadores de información sobre herramientas con su propio código JavaScript.

ANTES DE

<span class="badge badge-sm badge-plain">Admin Mode</span>

DESPUÉS

<span 
    class="badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

INICIALIZADOR

<script>
    // Initialize any Tooltip on this page
    $(document).ready(function () 
        {
            $(''[data-toggle="tooltip"]'').tooltip();
        }
    );
</script>

Información sobre herramientas de plantilla de arranque (como INSPINIA)

Si está utilizando una plantilla bootstrap (como INSPINIA), está incluyendo un script de soporte para admitir las características de la plantilla:

    <script src="/Scripts/app/inspinia.js" />

En el caso de INSPINIA, el script incluido inicializa automáticamente todas las informaciones sobre herramientas al ejecutar el siguiente código javascript cuando el documento termina de cargarse:

// Tooltips demo
$(''.tooltip-demo'').tooltip({
    selector: "[data-toggle=tooltip]",
    container: "body"
});

Debido a esto, NO tiene que inicializar las sugerencias de herramientas de estilo INSPINIA usted mismo. Pero tienes que formatear tus elementos de una manera específica. El Inicializador busca elementos HTML con la tooltip-demo sobre tooltip-demo en el atributo de class , luego llama al método tooltip() para inicializar cualquier elemento secundario que tenga definido el atributo data-toggle="tooltip" .

Para nuestra insignia de ejemplo, coloque un elemento exterior a su alrededor (como <div> o <span> ) que tenga class="tooltip-demo" , luego coloque los atributos de data-toggle data-placement y title para la información sobre herramientas real Dentro del elemento que es la insignia. Modifica el HTML original de arriba para ver algo como esto:

ANTES DE

<span class="badge badge-sm badge-plain">Admin Mode</span>

DESPUÉS

<span class="tooltip-demo">
    <span 
        class="badge badge-sm badge-plain" 
        data-toggle="tooltip" 
        data-placement="right" 
        title="Tooltip on right" 
     >Admin Mode</span>
</span>

INICIALIZADOR

None

Tenga en cuenta que cualquier elemento secundario dentro del elemento <span class="tooltip-demo"> tendrá su información sobre herramientas correctamente preparada. Podría tener tres elementos secundarios, todos ellos con información sobre herramientas, y colocarlos dentro de un contenedor.

Múltiples elementos, cada uno con información sobre herramientas

<span class="tooltip-demo">
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="A Tooltip">Text 001</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Another Tooltip">Text 002</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Third Tooltip">Text 003</span>
</span>

El mejor uso para esto sería agregar el class="tooltip-demo" a un <td> o un <div> o <span> externo.

Información simple sobre herramientas de Bootstrap mientras usas una plantilla

Si está utilizando INSPINIA, pero no desea agregar etiquetas externas extra <div> o <span> para crear información sobre herramientas, puede usar información sobre herramientas estándar de Bootstrap sin interferir con la plantilla. En este caso, usted será responsable de iniciar usted mismo la información sobre herramientas. Sin embargo, debe usar un valor personalizado en el atributo de class para identificar sus elementos de información sobre herramientas. Esto evitará que su inicializador Tooltip interfiera con los elementos afectados por INSPINIA. En nuestro ejemplo, usemos standalone-tt :

ANTES DE

<span class="badge badge-sm badge-plain">Admin Mode</span>

DESPUÉS

<span 
    class="standalone-tt badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

INICIALIZADOR

<script>
    // Initialize MY standalone tooltips, ignoring INSPINIA-affected elements
    $(document).ready(function () 
        {
            $(''.standalone-tt'').tooltip();
        }
    );
</script>

Answer 23

http://getbootstrap.com/javascript/#tooltips-usage

Funcionalidad de inclusión Opt-in Por razones de rendimiento, Tooltip y Popover data-apis son opt-in, lo que significa

Usted debe inicializarlos usted mismo.

Una forma de inicializar todas las informaciones sobre herramientas en una página sería seleccionarlas por su atributo de alternancia de datos:

<script>
$(function () {
    $(''[data-toggle="tooltip"]'').tooltip()
})
</script>

Poner este fragmento de código en su html le permite usar la información sobre herramientas

Ejemplos:

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

<!-- a tag -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

Answer 24

Alternativa rápida y ligera para el complemento de información sobre herramientas de Bootstrap:

HTML:

<div>
    <div class="mytooltip" id="pwdLabel">
        <label class="control-label" for="password">Password</label>

        <div class="mytooltiptext" id="pwdLabel_tttext">
            6 characters long, must include letters and numbers
        </div>                                

    </div>

    <input type="password" name="password" value="" id="password" autocomplete="off"
           class="form-control" 
           style="width:125px" />
</div>

CSS:

<style>
    .mytooltiptext {
        position: absolute;
        left: 0px;
        top: -45px;
        background-color: black;
        color: white;
        border: 1px dashed silver;
        padding:3px;
        font-size: small;
        text-align: center;
    }

    .mytooltip {
        position: relative;
    }

    .mytooltip label {
        border-bottom: 1px dashed black !important;
    }
</style>

JSCRIPT:

$(".mytooltip").mouseover(function(){
    var elm = this.id;
    $("#" + elm + "_tttext").fadeIn("slow");
});

var ttTmo;
$(".mytooltip").mouseout(function(){
    var elm = this.id;
    clearTimeout(ttTmo);
    ttTmo = setTimeout(function(){
        $("#" + elm + "_tttext").fadeOut("slow");
    },3000);
}); 

La etiqueta / texto debe incluirse en un contenedor de la clase "mytooltip" Este contenedor debe tener una identificación.

Después de la etiqueta está el texto de la sugerencia de la herramienta envuelto en un div de la clase "mytooltiptext" e id que consiste en el id del contenedor primario + "_tttext". Se pueden utilizar otras opciones para los selectores.

Espero eso ayude.