Tooltip Bootstrap 4 does not work

Asked

Viewed 1,675 times

0

I’m trying to use Tooltip with Bootstrap 4, but it just doesn’t 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>

Page end after JS files:

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


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

  } );
</script>

I am using jquery 3.3.1, but I already used version 2.1.4 too and it didn’t work. Another detail is that when I add the Tooltip settings, the title that appeared before ceases to appear.

RESOLVED:

I managed to solve it in a way I didn’t quite understand... I took the tooltip() function from the html file, I used it after adding all JS. I put it together with an external JS file (main.js) and it worked. Thanks to all who contributed!

javascript jquery bootstrap-4

  • Is your HTML dynamic? Is there an error in the browser console? Why does Tooltip work normally in this scenario. Here is an example: https://jsfiddle.net/0sw67k3n/

  • Hello, the table where the buttons are, is generated with PHP when loading the page.

  • Any errors in the console? Edit the question and enter the scripts you are using.

2 answers

1

I used the tooltips in a project and 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.

  • Giovanni, I tested it this way, but it didn’t work either :(

  • Check the console messages in the browser, see if there is no error message.

  • I managed to solve Gilvani, thanks for the collaboration! I edited the question with what I did to solve.

1

Make sure you have declared all the necessary files, in the example I am using the 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>
<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>

  • Leandrade, I need to load the JS files and run Function before HTML?

  • No, not Reginaldo. This is here on the site that he leaves this way. But no, leaves normal, first the body with all the HTML you need and after the body tag, inside the tag script you put your JS.

Browser other questions tagged javascript jquery bootstrap-4

You are not signed in. Login or sign up in order to post.