Tooltip is not set inside the modal

Asked

Viewed 402 times

2

I’ve read and tested several questions from here on stackoverflow pt e en and a few more issues on github but none of them helped me solve the problem.

I’m trying to set a tooltip inside the modal, but it just shows the title and the tooltip is not set. As in the image below:

inserir a descrição da imagem aqui

I already tested setar the tooltip when the modal is displayed. That way:

$(ele).on('shown.bs.modal', function () {
    $('[data-toggle="tooltip"]').tooltip();
});

Didn’t work.

The html of button is that way:

<button class="btn btn-primary btn-select2" data-toggle="tooltip" type="button" data-placement="top" title="Selecionar todos"><i class="fas fa-check-double"></i></button>

Until then, neither the title appearance.

Every time the modal is opened, I do a foreach to find these button (for another function) but I took advantage and I set again the title, the data-original-title and the tooltip, in this way:

$('modal').find('.btn-select2').each(function() {
    $(this).attr('title', 'Selecionar Todos');
    $(this).attr('data-original-title', 'Selecionar Todos');
    $(this).data('placement', 'top');
    $(this).tooltip();
});

That’s when the title equal in the image, but without success as to the tooltip. Some way this can be solved?

javascript html twitter-bootstrap tooltip

  • Recently I had a similar problem because in some places I needed 2 trailers data-toggle, to resolve put attributes in HTML as data-tooltip="tooltip" and in the JS $('[data-tooltip="tooltip"]').tooltip(). See if this solves.

  • I tested that way, also unsuccessfully.

  • See if the answer code helps you.

  • Dude, what kind of component is that you’re wearing? He doesn’t look like anything standard Bootstrap3... check this guy’s documentation if he accepts this kind of tooltype customization

  • It is a template that uses bootstrap, in relation to the template, it uses everything in the same way as boostrap

1 answer

3

I’m only posting so you can see that it’s working to see if you’ve done something different.

The tooltip appears when you place the mouse on the check button inside the modal.

$('.modal').on('shown.bs.modal', function () {
    $('[data-toggle="tooltip"]').tooltip();
});

$('modal').find('.btn-select2').each(function() {
    $(this).attr('title', 'Selecionar Todos');
    $(this).attr('data-original-title', 'Selecionar Todos');
    $(this).data('placement', 'top');
    $(this).tooltip();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <button class="btn btn-primary btn-select2" data-toggle="tooltip" type="button" data-placement="top" title="Selecionar todos"><i class="fas fa-check-double"></i>Check</button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Browser other questions tagged javascript html twitter-bootstrap tooltip

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