The docs for tooltips say I need to add the attribute data-mdb-toggle="tooltip" however the tab already has a data-mdb-toggle="tab". How can I have both work? The only workaround I saw was to put the tooltip on a child element but it looks weird. Is there a workaround?

Resources (screenshots, code snippets etc.)

<div class="sticky-top mb-3 nav-tabs-container">
    <ul class="nav nav-tabs nav-fill" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" id="tab-link-info" data-mdb-toggle="tab" href="#tab-content-info" role="tab" aria-controls="tab-content-info" aria-selected="true"><i class="fal fa-square-info fa-fw" data-mdb-toggle="tooltip" title="Campground Information"></i></a>
        </li>