The design of the previous standard tooltips has been adapted to the design of the tooltips from the new tl:DropDownControl. Tooltips are displayed in front of other elements because they are placed high up in the DOM. In tables, for example, the table header is behind the tooltips.
\\
\\
By default, tooltips are displayed above or below the associated element. They are preferably positioned above if there is enough space. The preferred horizontal growth direction of tooltips is right. That is, the left edge of the tooltip is placed flush with the left edge of the element and the tooltip is extended to the right if there is enough space. If the space is too small, the right edge of the tooltip is placed level with the right edge of the element. When positioning, additional care is taken to ensure that the arrow of the tooltip always points to the element. So, if the element is too small, the tooltip is positioned so that the arrow is centered on the element.
\\
\\
In vertical menus with entries below each other, it is more convenient for the workflow if the tooltips are displayed to the right or left of the element. This can be achieved by adding the CSS class .tooltipHorizontal to the element itself or to an ancestor of the element.
Test
Hover the mouse over components that should display tooltips. For example, menu items, navigation icons, people or contacts. Tooltips should be displayed above or below the associated item by default. In vertical menus with items below each other, tooltips should be displayed to the right or left of them.