Simplest way of using Tooltip is by leveraging it’s show prop and specifying alignPosition to determine it’s position relative to the element it’s aligned to.
If you have multiple Tooltips on the page, TooltipProvider allows you to only have to instantiate the component once and simply provide html attributes to the elements that need tooltips.
Elements or components that use the browser’s native disabled property, have the problem of the provider not being able to track element events, natively elements with disabled do not trigger events, such as click, mouseup, mousedown, keydown… if the element has a title the tooltip will not work correctly, for this scenario we recommend using a different strategy to continue that the element emits events but still has the disabled state. For example, the Button component:
Snippet
// instead of
<buttonclassName="btn btn-primary"disabled=""title="Open Menu">Click</button>
<buttondisabledtitle="Top">Top</button>
Snippet
// use
<buttonclassName="btn btn-primary disabled"aria-disabled="true"title="Open Menu"
>
Click
</button>
<buttonaria-disabled="true"className="disabled"title="Top">Top</button>
Add the disabled CSS class that adds the visual state of disabled and the aria-disabled property to keep the element accessible, this same behavior can be repeated for other elements where you want the title even when the component is disabled.
CSS selector to scope provider to. All titles within this scope will be
rendered in the tooltip. Titles outside of this scope will be styled
as with the default browser.