Now that the design has been finalized, we can introduce an initial version of the Tooltip as a WIP component in Codex.

Implementation details

Under the hood, the Codex Tooltip component will actually be implemented as a custom directive. The reason for this is that a tooltip is very concerned with the DOM element on the page that it describes; we need to track things like the focus state on this reference element to ensure that the tooltip behaves in the expected way.

Vue.js components are designed to be as isolated and independent from the surrounding page as possible; directives, in contrast, "are mainly intended for reusing logic that involves low-level DOM access on plain elements."

For the positioning logic, we will once again rely on FloatingUI (although we cannot reuse the useFloatingMenu composable, because we need somewhat different behavior and we are working outside of the component setup() function).

Usage

Usage of the Codex Tooltip will work like a standard Vue.js directive.

<template>
    <!-- tooltip directive applied to a component -->
    <cdx-button v-tooltip="'This is a tooltip'">
        Button with Tool Tip
    </cdx-button>

    <!-- tooltip directive applied to a native HTML element -->
    <input
        v-tooltip:right="'This is a helpful tooltip'"
        class="cdx-text-input__input"
        type="text"
    >
</template>

<script>
import { CdxButton, CdxToolTip } from '@wikimedia/codex';
export default defineComponent( {
    name: 'ToolTipDemo',
    components: { CdxButton },

    // Note that directives are registered separately from components.
    // They can be registered at the component level or globally via
    // app.directive()
    directives: {
        tooltip: CdxToolTip
    }
} );
</script>

Directives cannot take "props", the way that components can, but they can receive some user-specified arguments. For example, if the user wanted to specify which side a tooltip should anchor itself to for a given element, the user could specify this as an argument:

<input v-tooltip:bottom-start="'This tooltip is anchored to bottom-start'" />

<button v-tooltip:top-end="'This tooltip is anchored to top-start'" />

Any of the standard FloatingUI Placement options would be supported here.

Acceptance Criteria

• A new WIP Tooltip component has been added to Codex, implemented as a Vue.js directive
• The component follows the Tooltip design specs
• The component follows our best interpretation of the APG Tooltip Pattern (note there is not a complete consensus here) – specifically, this is a "simple tooltip" pattern which can only contain text-content (no interactive / focusable content is allowed)