Bootstrap control with multiple "data-toggle"

I managed to solve this issue without the need to change any markup with the following piece of jQuery. I had a similar problem where I wanted a tooltip on a button that was already using data-toggle for a modal. All you will need to do here is add the title to the button.

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

Since tooltip is not initialized automatically, you can make changes in your initialization of the tooltip. I did mine like this:

$(document).ready(function() {
    $('body').tooltip({
        selector: "[data-tooltip=tooltip]",
        container: "body"
    });
});

with this markup:

<button type="button" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" class="btn btn-info" title="Your tooltip">Text here</button>

Notice the data-tooltip.

Update

Or simply,

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

If you want to add a modal and a tooltip without adding javascript or altering the tooltip function, you could also simply wrap an element around it:

<span data-bs-toggle="modal" data-bs-target="modal">
    <a data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip">
      Hover Me           
    </a>
</span>