The design of the previous standard tooltips has been updated to match the design of the tooltips from the new tl:DropDownControl. Tooltips are displayed before other elements because they are positioned high up in the DOM. In tables, for example, the table header appears behind the tooltips.
\\
\\
By default, tooltips are displayed above or below the associated element. They are preferably positioned above the element if there is enough space. The preferred horizontal expansion direction for tooltips is to the right. This means the left edge of the tooltip is aligned with the left edge of the element, and the tooltip extends to the right as long as there is sufficient space. If there is not enough space, the right edge of the tooltip is positioned flush with the right edge of the element. When positioning the tooltip, care is also taken to ensure that the tooltip’s arrow always points toward the element. Thus, if the element is too small, the tooltip is positioned so that the arrow is centered relative to the element.
\\
\\
In vertical menus with entries stacked one below the 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 your mouse over components that should display tooltips. For example, menu items, navigation icons, people, or contacts. By default, tooltips should appear above or below the corresponding element. In vertical menus with items listed one below the other, tooltips should appear to the right or left of the item.