Posso usar HTML complexo com a dica de ferramenta do Twitter Bootstrap?

143

Se eu verificar a documentação oficial , posso ver uma propriedade chamada HTML:

Name    |    Type       |    default  |    Description
----------------------------------------------------------------------------
html    |    boolean    |    false    |    Insert html into the tooltip. 
                                           If false, jquery's text method 
                                           will be used to insert content 
                                           into the dom. Use text if you're 
                                           worried about XSS attacks.

Diz "insira html na dica de ferramenta", mas o tipo é booleano. Como posso usar html complexo dentro de uma dica de ferramenta?

javascript html twitter-bootstrap-3 tooltip sergserg
fonte

Respostas:

256

Esse parâmetro é apenas sobre se você usará html complexo na dica de ferramenta. Defina-o como truee, em seguida, pressione o html no titleatributo da tag.

Veja este violino aqui - eu configurei o atributo html como true através data-html="true"da <a>tag e, em seguida, apenas adicionei o html ad hoc como exemplo.

George Wilson
fonte
3
Bem, a documentação deles não é tão clara nessa área. Obrigado por compartilhar esta resposta! :)
sergserg
3
A documentação do bootstrap é notoriamente inútil :) Fico feliz em esclarecer as coisas!
9134 George Wilson4 de
6
O exemplo do violino não funciona para mim. Ainda vejo o código HTML bruto.
Sonson123
3
Provavelmente, alguma alteração no código de Bootstrap, como você suspeita. Antes de eu ter todas as minhas dicas de ferramentas conectadas para títulos html usando {html: true} nos atributos da função, mas passando de 2.2.2> 2.3.1, eu tive que adicionar data-html = "true" aos meus elementos e apenas recortei o {html: true} parte. Eu realmente gostaria que eles tentassem acertar as coisas com mais frequência na primeira vez e não causassem mudanças constantes entre os lançamentos.
Andrew Swihart 29/03
1
Veja aqui: jsfiddle.net/44khF/148 . Além disso, parece funcionar apenas com o atributo de dados e não usando html: true na inicialização se delegados forem usados.
ptutt
34

Assim como normal, usando data-original-title :

Html:

<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>

Javascript:

$("[rel=tooltip]").tooltip({html:true});

O parâmetro html especifica como o texto da dica de ferramenta deve ser transformado em elementos DOM. Por padrão, o código HTML é escapado nas dicas de ferramentas para impedir ataques XSS. Digamos que você exiba um nome de usuário em seu site e mostre uma pequena biografia em uma dica de ferramenta. Se o código html não for escapado e o usuário puder editar a biografia, poderá injetar código malicioso.

Matt Zeunert
fonte
5
data-original-titleé onde o bootstrap armazena temporariamente, titlese estiver presente. data-titleé suficiente se você não tiver um título, como a<a href="#" title="xxx">
davidkonrad 25/03
Isso é ótimo e simples
Gayan
Olá @MattZeunert Eu o usei e estou funcionando perfeitamente, mas quero atualizar o título de acordo com meus dados futuros, sem recarregar a página e definir dinamicamente, quero dizer, alterar o conteúdo dentro do título.
3 regras
32

Outra solução para evitar a inserção de html no título dos dados é criar div independente com conteúdo html de dica de ferramenta e consulte essa div ao criar sua dica de ferramenta:

<!-- Tooltip link -->
<p><span class="tip" data-tip="my-tip">Hello world</span></p>

<!-- Tooltip content -->
<div id="my-tip" class="tip-content hidden">
    <h2>Tip title</h2>
    <p>This is my tip content</p>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        // Tooltips
        $('.tip').each(function () {
            $(this).tooltip(
            {
                html: true,
                title: $('#' + $(this).data('tip')).html()
            });
        });
    });
</script>

Dessa forma, você pode criar conteúdo html legível complexo e ativar quantas dicas de ferramenta desejar.

demonstração ao vivo aqui no codepen

migli
fonte
Fantástico. Estou tão feliz que alguém propôs uma solução que não está inserindo HTML diretamente na propriedade data.
Mir
27

O htmlatributo data faz exatamente o que diz nos documentos. Tente este pequeno exemplo, não é necessário JavaScript (dividido em linhas para esclarecimento):

<span rel="tooltip" 
     data-toggle="tooltip" 
     data-html="true" 
     data-title="<table><tr><td style='color:red;'>complex</td><td>HTML</td></tr></table>"
>
hover over me to see HTML
</span>


Demonstrações do JSFiddle:

davidkonrad
fonte
7

defina a opção "html" como true se desejar incluir o html na dica de ferramenta. O html real é determinado pela opção "title" (o atributo title do link não deve ser definido)

$('#example1').tooltip({placement: 'bottom', title: '<p class="testtooltip">par</p>', html: true});

Amostra ao vivo

Andriy F.
fonte