Search code examples
tooltipbootstrap-5

What's the best practice for using multiple data-bs-toggle (modal and tooltip)?

I have a couple of links with modal and tooltip.

<a href="#" data-bs-toggle="modal" data-bs-target="#link_delete_modal" class="btn btn-icon btn-sm btn-danger <?= $row->is_verified ? 'disabled' : null ?>" data-link-id="<?= $row->link_id ?>" title="<?= l('global.delete') ?>"><span data-bs-toggle="tooltip" title="<?= l('global.delete') ?>"><i class="fa fa-fw fa-1x fa-trash-alt"></i></span></a>

The tooltip position starts from icon, not from button side.

enter image description here

But if I change position of modal and tooltip, then btn-group doesn't work, but tooltip looks like needed

enter image description here

Can you share with me best practice for using multiple data-bs-toggle?

Solution

  • You can use JS to instantiate modal (as you're already using JS to initiate tooltips), and use tooltip on the same a tag element (remove span):

    <a href="#" id="modalBtn" class="btn btn-icon btn-sm btn-danger <?= $row->is_verified ? 'disabled' : null ?>" data-link-id="<?= $row->link_id ?>" title="<?= l('global.delete') ?>" data-bs-toggle="tooltip" title="<?= l('global.delete') ?>"><i class="fa fa-fw fa-1x fa-trash-alt"></i></a>

    const modal = new bootstrap.Modal('#link_delete_modal');

document.querySelector('#modalBtn').addEventListener('click', () => {
  modal.toggle();
});

    demo:

    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
</head>

<body class="p-5 m-5">


  <div class="btn-group" role="group" aria-label="Basic example">


    <a href="#" id="modalBtn" class="btn btn-icon btn-sm btn-danger <?= $row->is_verified ? 'disabled' : null ?>" data-link-id="<?= $row->link_id ?>" title="<?= l('global.delete') ?>" data-bs-toggle="tooltip" title="<?= l('global.delete') ?>"><i class="fa fa-fw fa-1x fa-trash-alt"></i></a>

  </div>


  <!-- Modal -->
  <div class="modal fade" id="link_delete_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>



  <script>
    const modal = new bootstrap.Modal('#link_delete_modal');

    document.querySelector('#modalBtn').addEventListener('click', () => {
      modal.toggle();
    });

    document.querySelectorAll('[data-bs-toggle="tooltip"]')
      .forEach(tooltip => {
        new bootstrap.Tooltip(tooltip);
      });
  </script>
</body>

</html>