feat: Add placement support (top/bottom/left/right) to tooltip component (CSS & JS support)

[ramjawade]

Problem

The current tooltip component in src/css/tooltip.css only displays tooltips above the element. There is no support for custom placement (bottom, left, or right), which can cause usability issues for certain layouts.

Additionally, the included src/js/tooltip.js file converts native title attributes to data-tooltip (and sets aria-label), allowing developers to continue using the title attribute while adopting Oat's custom styling. However, placement is not configurable in either HTML or JS.

Current Behavior

• Tooltips are always positioned at the top (inset-block-end) of the target element.
• The only way to change the position is to override the CSS.
• Developers can use title and rely on src/js/tooltip.js to migrate it to data-tooltip, but cannot choose placement direction this way.

Proposed Solution

• Add support for a data-tooltip-placement attribute (e.g., top [default], bottom, left, right).
• Enhance the CSS to support and style each placement variant.
• The tooltip.js script should be updated to transfer placement direction if given via a data-tooltip-placement or (optionally) by some other ergonomic markup, when converting title to data-tooltip.
• Continue to support progressive enhancement: if JS is not loaded, fall back gracefully to the browser default title behavior.

Example Usage

<!-- Top (default) -->
<button title="Tooltip, top">Top</button>
<!-- Bottom -->
<button title="Tooltip, bottom" data-tooltip-placement="bottom">Bottom</button>
<!-- Left -->
<button data-tooltip="Tooltip, left" data-tooltip-placement="left">Left</button>
<!-- Right -->
<button data-tooltip="Tooltip, right" data-tooltip-placement="right">Right</button>

CSS Example (for bottom placement)

[data-tooltip-placement="bottom"]::after {
  inset-block-start: calc(100% + 10px);
  transform: translateX(-50%) translateY(-4px);
}
[data-tooltip-placement="bottom"]::before {
  inset-block-start: calc(100% - 5px);
  border-top-color: transparent;
  border-bottom-color: var(--foreground);
}

Benefits

• Flexible: Tooltips can be displayed in any direction as needed.
• Ergonomic: Works with both title and data-tooltip, keeps progressive enhancement.
• Non-breaking: Existing tooltips work as before (default/top placement).