1

Olá, pessoal. Estou com o seguinte problema..., por algum motivo o meu tooltip não está carregando minha imagem. Segue o meu código abaixo e a imagem do que está acontecendo!

inserir a descrição da imagem aqui

<a data-toggle="tooltip" title="<img src='https://www.confidencial.com.br/wp-content/uploads/2019/05/tooltip-cupom-fiscal.jpg'/>"> <i style="text-align: right; font-size:22px; color: #d4b268" class="fa fa-info-circle" aria-hidden="true"></i></a>

jQuery(document).ready(function() {
 jQuery('a[data-toggle="tooltip"]').tooltip({
    animated: 'fade',
    placement: 'right',
    html: true
 });
});

1 Resposta 1

2

O que faltou aí foi inserir o data-html="true" para poder renderizar o conteúdo do title como HTML:

$(function() {
 $('a[data-toggle="tooltip"]').tooltip({
    animated: 'fade',
    placement: 'right',
    html: true
 });
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<a data-toggle="tooltip" data-html="true" title="<img src='https://www.placecage.com/g/140/100'/>"> <i style="text-align: right; font-size:22px; color: #d4b268" class="fa fa-info-circle" aria-hidden="true"></i>link qualquer</a>

3
  • Coloquei o data-html="true", mas o erro continua! Commented 13/06/2019 às 17:44
  • Então abra o console do navegador e veja se dá algum erro!
    – LeAndrade
    Commented 13/06/2019 às 18:01
  • Não me retorna nenhum erro. O balão de informação não renderiza a tag img, está considerando a tag como uma string. Commented 13/06/2019 às 19:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .