261

Me estoy volviendo loco 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 mostrarse, 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 allí. Así que supongo que debería funcionar, ¿o me estoy perdiendo algo vital aquí?

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

¡Gracias por cualquier ayuda!

twitter-bootstrap Mike Bartlett
fuente

2

La información sobre herramientas se está iniciando en el archivo application.js en el ejemplo de Twitter. ¿Puedes publicar tu html? Me gustaría ver cómo está inicializando el guión.

Andres Ilich

2

Ahhhhh ... ignoré eso dado el primer comentario. Entonces, esto debería funcionar: code<a href="#" rel="tooltip" title="Un buen tooltip" class="tooltip-test"> prueba </a> <br> <script> // tooltip demo $ (' .tooltip-test '). tooltip () </script>

Mike Bartlett

1

no olvide pasar un selector a las opciones de información sobre herramientas,$('.tooltip-test').tooltip({ selector: "a" })

Andres Ilich

Gracias andres En realidad, no parecía necesitar el selector allí, creo que se debe a que la clase de a se hace referencia como prueba de información sobre herramientas.

Mike Bartlett

3

Sin la opción de selector, la información sobre herramientas no funciona para mí, aquí hay una demostración que puse: jsfiddle.net/VXctp , pruébelo sin el selector.

Andres Ilich

276

Para resumir: active su información sobre herramientas usando los selectores jQuery

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

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

Manuel Ebert
fuente

13

Para aquellos que trabajan con Rails, esto ya está definido bootstrap.js.coffeecon $(".tooltip").tooltip(). Solo asegúrate de incluir //= require bootstrapen tu application.js.

slhck

66

Agregar la clase .tooltip a cualquier elemento romperá la información sobre herramientas para mí. El contenido dentro del elemento con la clase .tooltip se ocultará y la información sobre herramientas se mostrará si logro encontrar el elemento oculto con el mouse. Usar cualquier otro selector o nombre de clase funcionará bien. \

Leonel Galán

44

@Leito es correcto, bootstrap define estilos para .tooltipy, por defecto, son invisibles. Sin relembargo, puede usar el atributo o cualquier otra clase como selector.

Manuel Ebert

3

Sí, necesita AMBOS el marcado HTML y los selectores JS. Estas no son formas alternativas de aplicar información sobre herramientas.

ATSiem

1

Algunos podrían estar tratando de mostrar información sobre herramientas en un modo y esto no funciona en todas las versiones de arranque. Si lo prueba en una página normal, no modal, y funciona, entonces sabe que ese es el problema.

mjnissim

212

Después de experimentar el mismo problema, descubrí que esta solución funcionaba 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!

Marcus Hoelscher
fuente

20

¡Gracias! Esto funcionó para mí. De alguna manera, las otras soluciones en esta página no estaban funcionando para mí.

Romano

1

Estoy con roman Esta solución también funciona con las variantes de css de bootswatch.

DaveCS

Esto funcionó para mí. Nada más lo dio vida hasta que probé esto. ¡Gracias!

BlakePetersen

1

Esto funcionó para mí también. Alguna idea de por qué $ ('[data-toggle = "tooltip"]'). Tooltip ({'place': 'top'}); no funciona

ZeroCool

Gracias, esto funcionó para mí. Solo asegúrese de insertar el código entre las etiquetas <script> DESPUÉS de cargar la biblioteca JQuery.

GeraldScott

31

No necesita 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 última versión de jquery.js

Para los glifos necesitas la imagen

glyphicons-halfings.png y / o glyphicons-halfings-white.png (imágenes en color blanco)
que debe cargar dentro de la carpeta / img / de su sitio web (o) almacenarlo donde quiera, pero cambie el directorio de la carpeta dentro del bootstrap .css

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

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

Eso es...

Harish Kumar
fuente

27

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

Funcionalidad de suscripción voluntaria Por razones de rendimiento, la información sobre herramientas y las API de datos de Popover son de suscripción voluntaria, lo que significa

debes inicializarlos tú mismo.

Una forma de inicializar todas las informaciones sobre herramientas en una página sería seleccionarlas por su atributo de alternar 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>

Max O.
fuente

2

¡Gracias por compartir este concepto de suscripción! Nunca lo lea de ningún tutorial.

dpp

La solución a todos mis whoas de información sobre herramientas jquery / bootstrap

DJ Burb

Falta el enlace proporcionado: consulte getbootstrap.com/docs/4.1/components/tooltips

Guillaume Husta el

20

Sé que esta es una vieja pregunta, pero como tuve este problema con el nuevo lanzamiento de bootstrap y no está claro en el sitio web, así es como habilita la información sobre herramientas.

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

luego active esta clase en su etiqueta javascript:

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

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

Amir Soleymani
fuente

Esta fue la única solución que funcionó para mí. Estoy usando data-original-title = "{{someAngularJSVar}}" para actualizar el título y está funcionando perfectamente.

WKara

20

HTML

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

JQuery

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

Este es trabajo para mí.

Igor Shvydok
fuente

1

Esta propuesta también funcionó perfectamente para mí. Me gustó porque es simple y elegante. Le permite seguir usando los estándares de Bootstrap como si el complemento se iniciara por defecto, como sucede con los elementos de menú desplegable y tabulación. Agregué el JS propuesto por @Igor a un nuevo archivo y lo incluí en el bootstrap.js original

Iago Rodríguez-Quintana

14

Si hace lo $("[rel='tooltip']").tooltip();que otras respuestas han sugerido, activará la información sobre herramientas solo en los elementos que están actualmente en DOM. Eso significa que si va a cambiar DOM e insertar contenido dinámico más tarde, 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 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 titlecomo selector en lugar de rel=titleo data-title. Esto tiene la ventaja de que se puede aplicar a muchos otros elementos ( relse supone que es solo para anclas) y también funciona como "respaldo" para los navegadores antiguos.

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

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

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

Shital Shah
fuente

Estoy luchando con este porque la generación dinámica tiene varios niveles de profundidad. El valor href es contenido generado dinámicamente y la identificación div resultante se basa en el número de artículo que coincide con el valor href. Entonces, si tengo una página de enlaces de Tipo de elemento A, entonces tengo una lista de elementos a-1, elemento a-2, elemento a-3, cada uno de esos enlaces es a la página individual de elementos, pero quiero el contenido de información sobre herramientas para mostrar contenido dinámico al pasar el mouse, para que el usuario pueda tener una idea del artículo antes de hacer clic en el enlace completo.

Melanie Sumner

Esto fue lo más útil. Tenía la información sobre herramientas configurada para enlazar a un ícono, y la biblioteca de íconos tenía algún tipo de carga asincrónica para que no pudiera vincularse. Fue muy extraño porque funcionaría cuando se usa un selector de clase pero no una ID. ¡Gracias por tu ayuda!

Nick Woodhams

14

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

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

Consulte 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>

Marcos Cassiano
fuente

2

cierre el atributo de tipo ... editar solo un error tipográfico es un PITA: S

Mohd Abdul Mujib

10

La información sobre herramientas y el popover NO son complementos solo de CSS como el menú desplegable o la barra de progreso. Para usar información sobre herramientas y popover, DEBE activarlos usando jquery (lea javascript).

Entonces, digamos que queremos que se muestre un popover 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 debe tener el siguiente código de JavaScript para activar popover:

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

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

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

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

Mayank Jaiswal
fuente

5

en la sección principal, 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, debe 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>

Rush.2707
fuente

4

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

Solo usa rel="tooltip" title="Your Title" data-placement=" "

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

Harish Kumar
fuente

3

He agregado jquery y bootstrap-tooltip.js en el encabezado. ¡Agregar este código en el pie de página me funciona! ¡pero cuando agrego el mismo código en el encabezado no funciona!

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

Karthik
fuente

3

En este caso, el DOM aún no se ha cargado, por lo que no todos los elementos pueden existir en la página. Envuelve el código anterior en$(function() { ... });

johnml

3

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"

Es solo agregar la siguiente línea al final del elemento.

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

Andres Calle
fuente

Realmente esperaba que eso fuera a funcionar para mí, pero lamentablemente no fue así.

turboladen

Ahora estoy más interesado en Djanto que en Rails, pero si pega su código, podría intentar darle algún consejo.

Andres Calle

3

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

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

Dieter
fuente

3

Acabo de agregar:

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

debajo de bootstrap.min.js y funciona.

Andy.sin
fuente

3

Usemos un ejemplo para mostrar cómo se puede agregar la información sobre herramientas a cualquier elemento HTML en su documento.

NOTA:

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

Se incluye el orden de los guiones.
Vea si está intentando inicializar elementos HTML que se han eliminado
Vea si está intentando llamar a métodos en archivos JS que ya no incluye

Vea si está incluyendo el archivo JS que proporciona la funcionalidad que necesita (no solo para información sobre herramientas, sino también 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 a menudo 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 desplaza sobre ella.

HTML original:

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

Información sobre herramientas de Bootstrap 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 a 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 la plantilla Bootstrap (como INSPINIA)

Si está utilizando una plantilla de rutina de carga (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, la secuencia de comandos incluida inicializa automáticamente todas las informaciones sobre herramientas al ejecutar el siguiente código de 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 la información sobre herramientas de estilo INSPINIA. Pero DEBE formatear sus elementos de una manera específica. El Inicializador busca elementos HTML con tooltip-demoel classatributo, luego llama al tooltip()método para inicializar cualquier elemento secundario que tenga data-toggle="tooltip"definido el atributo .

Para nuestro ejemplo placa, colocar un elemento exterior que lo rodea (como un <div>o <span>) que tiene class="tooltip-demo", a continuación, coloque la data-toggle, data-placementytitle los atributos de la descripción real dentro del elemento que es la insignia. Modifique el HTML original de arriba para parecerse a 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 hijo dentro de <span class="tooltip-demo"> elemento tendrá su información sobre herramientas preparada correctamente. Podría tener tres elementos secundarios, todos necesitan información sobre herramientas, y colocarlos dentro de un contenedor.

Múltiples elementos, cada uno con una 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 a <td>o al exterior <div>o <span>.

Información sobre herramientas de Bootstrap simple al usar una plantilla

Si está utilizando INSPINIA, pero no desea agregar etiquetas <div>o <span>etiquetas externas adicionales para crear información sobre herramientas, puede utilizar la información sobre herramientas estándar de Bootstrap sin interferir con la plantilla. En este caso, usted será responsable de inicializar la información sobre herramientas usted mismo. Sin embargo, debe usar un valor personalizado en el classatributo para identificar sus elementos de información sobre herramientas. Esto evitará que su inicializador de información sobre herramientas interfiera con 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>

Mike Stillion
fuente

2

Si está creando su html que contiene la información sobre herramientas con javascript, y luego lo está insertando en el documento, debe activar el popover / tooltip DESPUÉS de haber insertado el html en el documento, no en la carga del documento ...

chri_chri
fuente

2

Debe colocar la información sobre 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 use $ (document) .ready:

$(document).ready(function() {

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

});

</script>

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

Enfocar
fuente

2

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

I have added a jsfiddle example

ejemplo

Shawn Vader
fuente

1

Ponga su 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 de información sobre herramientas css en http://twitter.github.com/bootstrap/assets/css/bootstrap.css, así que no lo olvides.

Joao Leme
fuente

1

De los documentos de bootstrap sobre herramientas

La información sobre herramientas es opcional 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()

Rahil Ahmad
fuente

0

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

Calum Childs
fuente

0

Necesitas hacer lo siguiente. Añade el

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

codifique en algún lugar de su página (preferiblemente en la <head>sección).

Agregue también data-toggle: "tooltip"a todo lo que desee habilitar con él.

Calum Childs
fuente

0

puedes usar Popper.js

<script src="JavaScript/popper.min.js"></script>
<script src="JavaScript/bootstrap.min.js"></script>

Y llame a la función de información sobre herramientas:

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

Mohsen Newtoa
fuente

-2

Alternativa rápida y más ligera al complemento de información sobre herramientas 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 estar encerrada en un contenedor de clase "mytooltip". Este contenedor debe tener un Id.

Después de la etiqueta está el texto de información sobre herramientas envuelto en un div de la clase "mytooltiptext" y la identificación que consiste en la identificación del contenedor principal + "_tttext". Se pueden usar otras opciones para selectores.

Espero eso ayude.

jdisla
fuente

La información sobre herramientas de Bootstrap no funciona

Respuestas:

NOTA:

EJEMPLOS DE TRABAJO

Información sobre herramientas de Bootstrap simple

Información sobre herramientas de la plantilla Bootstrap (como INSPINIA)

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

Información sobre herramientas de Bootstrap simple al usar una plantilla

HTML:

CSS:

JSCRIPT: