Hi,
I was trying to use both functionality at the same time: Here is my example html code:

<div class="symbol symbol-35px symbol-circle" data-bs-toggle="tooltip" data-placement="top" aria-label="Henüz Atanmamış" data-bs-original-title="Henüz Atanmamış" data-kt-initialized="1">
<span class="symbol-label fw-bolder l-height0 bg-transparent border cursor-pointer" data-bs-toggle="modal" data-bs-target="#responsibleAssignmentModal1">
<i class="las la-hourglass-half fs-1"></i>
</span>
</div>

In desktop screens it's working but in small screens when I click on the div it show both tooltip and modal. Is there a way to disable tooltip in this case?

Tried to hide tooltip but it's not working. Maybe you guide me?

var tooltipElements = document.querySelectorAll('.symbol[data-bs-toggle="tooltip"]');
var modalElements = document.querySelectorAll('.symbol[data-bs-toggle="modal"]');

modalElements.forEach(function (modalElement, index) {
modalElement.addEventListener('show.bs.modal', function () {
var tooltip = bootstrap.Tooltip.getInstance(tooltipElements[index]);
if (tooltip) {
tooltip.hide();
}
});
});