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-demo
el class
atributo, 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-placement
ytitle
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 class
atributo 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>