0

Estou tentando utilizar o Tooltip com Bootstrap 4, mas ele simplesmente não aparece:

No HTML está assim:

<a class="btn btn-sm btn-warning" href="" data-toggle="tooltip" data-placement="top" title="Editar"><i class="fa fa-edit"></i></a>

Fim da página após os arquivos JS:

<script type="text/javascript">
  $(document).ready(function() {
    $('#bootstrap-data-table-export').DataTable();


    $('[data-toggle="tooltip"]').tooltip()

  } );
</script>

Estou usando jquery 3.3.1, mas já usei a versão 2.1.4 também e não funcionou. Um outro detalhe, é que quando adiciono as configurações do Tooltip, o title que aparecia antes, deixa de aparecer.

RESOLVIDO:

Consegui resolver de uma forma que não entendi muito bem... Tirei a função tooltip() do arquivo html, eu o usava após adicionar todos JS. Coloquei junto a um arquivo JS externo (main.js) e funcionou. Obrigado a todos que contribuíram!

3
  • O seu HTML é dinâmico? Há algum erro no console do navegador? Por que nesse cenário o Tooltip funciona normalmente. Segue um exemplo funcionando: jsfiddle.net/0sw67k3n Commented 6/12/2018 às 17:21
  • Olá, a tabela onde os botões estão, é gerada com PHP no carregamento da página. Commented 6/12/2018 às 18:39
  • Algum erro no console? Edite a pergunta e insira os scripts que você tá usando. Commented 6/12/2018 às 19:08

2 Respostas 2

1

Utilizei as tooltips num projeto e as configurei assim:

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

E o HTML está como o seu:

<span data-toggle="tooltip" data-placement="bottom" title=" ... ">
    ...
</span>

Neste projeto usei tanto o jQuery 3 quanto o Bootstrap 4.

3
  • Giovanni, testei dessa forma, mas também não funcionou :( Commented 6/12/2018 às 18:39
  • Verifique as mensagens do console no navegador, veja se não há nenhuma mensagem de erro.
    – user50856
    Commented 6/12/2018 às 21:47
  • Consegui resolver Gilvani, obrigado pela colaboração! Editei a pergunta com o que fiz pra resolver. Commented 6/12/2018 às 22:13
1

Certifique-se de ter declarado todos os arquivos necessários, no exemplo estou utilizando o Bootstrap 4 e seus arquivos e a última versão da Datatable:

$(function() {

  $('#bootstrap-data-table-export').DataTable();
  $('[data-toggle="tooltip"]').tooltip();

});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></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>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>


<br><br>
<a class="btn btn-sm btn-warning" href="" data-toggle="tooltip" data-placement="top" title="Editar"><i class="fa fa-edit">Botão com tooltip</i></a>

<br><br>

<table id="bootstrap-data-table-export">
  <thead>
    <tr>
      <th>Column 1</th>
    </tr>
  </thead>
</table>

2
  • LeAndrade, preciso carregar os arquivos JS e executar a function antes do HTML? Commented 6/12/2018 às 18:37
  • Não, não Reginaldo. Isso é aqui no site que ele deixa desta maneira. Mas não, deixa normal, primeiro o body com todo o Html que você precisa e depois da tag body, dentro da tag script você coloca seus JS.
    – LeAndrade
    Commented 6/12/2018 às 18:46

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 .