Vamos usar um exemplo para mostrar como as dicas de ferramentas podem ser adicionadas a qualquer elemento HTML no seu documento.
NOTA:
Se essas amostras de dicas de ferramentas não funcionarem quando você as colocar em sua página, você terá outro problema. Você precisa olhar para coisas como:
- A ordem dos scripts sendo incluídos
- Veja se você está tentando inicializar elementos HTML que foram removidos
- Veja se você está tentando chamar métodos nos arquivos JS e não está mais incluindo
Veja se você está incluindo o arquivo JS que fornece a funcionalidade necessária (não apenas para dicas de ferramentas, mas para qualquer componente usado na 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>
A falha de QUALQUER dos itens acima pode (e geralmente impede) o carregamento e / ou a execução do javascript, e isso mantém tudo agradável e quebrado.
EXEMPLOS DE TRABALHO
Digamos que você tenha um selo e queira que ele mostre uma dica de ferramenta quando o usuário passar o mouse sobre ele.
HTML original:
<span class="badge badge-sm badge-plain">Admin Mode</span>
Dicas de ferramentas simples de inicialização
Se você estiver criando dicas de ferramentas para um Elemento HTML e estiver usando dicas de ferramentas simples de inicialização, será responsável por chamar os Inicializadores de dicas de ferramentas com seu próprio código JavaScript.
ANTES
<span class="badge badge-sm badge-plain">Admin Mode</span>
DEPOIS DE
<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>
Dicas de ferramentas de modelo de inicialização (como INSPINIA)
Se você estiver usando um modelo de autoinicialização (como INSPINIA), estará incluindo um script de suporte para suportar os recursos do modelo:
<script src="/Scripts/app/inspinia.js" />
No caso do INSPINIA, o script incluído inicializa automaticamente todas as dicas de ferramentas executando o seguinte código javascript quando o carregamento do documento terminar:
// Tooltips demo
$('.tooltip-demo').tooltip({
selector: "[data-toggle=tooltip]",
container: "body"
});
Por esse motivo, você NÃO precisa inicializar as Dicas de Ferramentas no estilo INSPINIA. Mas você precisa formatar seus elementos de uma maneira específica. O Inicializador procura elementos HTML com tooltip-demo
no class
atributo e chama o tooltip()
método para inicializar qualquer elemento filho que tenha o atributo data-toggle="tooltip"
definido.
Para o nosso exemplo crachá, coloque um elemento exterior em torno dele (como um <div>
ou <span>
) que tem class="tooltip-demo"
, em seguida, coloque o data-toggle
, data-placement
e,title
atributos para a dica real dentro do elemento que é o distintivo. Modifique o HTML original acima para ficar assim:
ANTES
<span class="badge badge-sm badge-plain">Admin Mode</span>
DEPOIS DE
<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
Observe que qualquer elemento filho dentro do <span class="tooltip-demo">
elemento terá sua dica de ferramenta adequadamente preparada. Eu poderia ter três elementos filhos, todos precisando de dicas de ferramentas, e colocá-los em um contêiner.
Vários itens, cada um com uma dica de ferramenta
<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>
O melhor uso para isso seria adicionar class="tooltip-demo"
um a <td>
ou um <div>
ou mais externo <span>
.
Dicas de ferramentas simples de inicialização ao usar um modelo
Se você estiver usando o INSPINIA, mas não desejar adicionar tags <div>
ou <span>
tags externas adicionais para criar dicas de ferramentas, poderá usar as dicas de ferramentas padrão do Bootstrap sem interferir no modelo. Nesse caso, você será responsável por inicializar as dicas de ferramentas. No entanto, você deve usar um valor personalizado no class
atributo para identificar seus itens de dica de ferramenta. Isso impedirá que o inicializador da dica de ferramenta interfira nos elementos afetados pelo INSPINIA. No nosso exemplo, vamos usarstandalone-tt
:
ANTES
<span class="badge badge-sm badge-plain">Admin Mode</span>
DEPOIS DE
<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>