Tooltip Bootstrap 4 does not work

Question

Tooltip Bootstrap 4 does not work

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I'm trying to use the Tooltip with Bootstrap 4, but it just does not show up:

In HTML it looks like this:

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

End of page after JS files:

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


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

  } );
</script>

I'm using jquery 3.3.1, but I already used version 2.1.4 also and it did not work. One more detail is that when I add Tooltip settings, the title that appeared before no longer appears.

RESOLVED:

I was able to solve it in a way that I did not quite understand ... I took the tooltip () function from the html file, I used it after adding all JS. I placed it next to an external JS file (main.js) and it worked. Thanks to all who contributed!

javascript jquery bootstrap-4

asked by anonymous 06.12.2018 / 18:03

2 answers

Doubts in the PHP float function Problem with conditional on React

score 1 · Answer 1

I used the tooltips in a project and I configured them like this:

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

And HTML is just like yours:

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

In this project I used both jQuery 3 and Bootstrap 4.

score 1 · Answer 2

Make sure you have declared all the necessary files, in the example I am using Bootstrap 4 and its files and the latest version of 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><scriptsrc="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><scriptsrc="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>