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.
But if I change position of modal and tooltip, then btn-group doesn’t work, but tooltip looks like needed
Can you share with me best practice for using multiple data-bs-toggle?
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>