QuestionLabel — JavaScript

The markup and CSS alignment classes are on the HTML & CSS page. This page covers the auto-flip helper.

Initialize

Unlike the class-based components, this is a single function you call once — it attaches one delegated listener to the root and covers every .UIql, including ones added later:

import { initQuestionTooltips } from '@popovandrii/ui-elements'
import '@popovandrii/ui-elements/style.css'

const teardown = initQuestionTooltips() // whole document
// initQuestionTooltips(myDialog)        // or scope to a container
// teardown()                            // when you tear the UI down

Links inside a hint are automatically opened in a new tab (with a hardened rel), and clicking the icon never toggles a surrounding control (e.g. a Switch).

Usage with Vue

It's a function returning a teardown, not a class — call it once in onMounted and run the teardown in onUnmounted. Scope it to the component's root so it only handles this subtree:

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { initQuestionTooltips } from '@popovandrii/ui-elements'
import '@popovandrii/ui-elements/style.css'

const root = ref<HTMLElement>()
let teardown: (() => void) | null = null

onMounted(() => {
  teardown = initQuestionTooltips(root.value!)
})
onUnmounted(() => teardown?.())
</script>

<template>
  <div ref="root">
    Password
    <span class="UIql" tabindex="0" aria-label="Help">
      <span class="UIql__text" role="tooltip">
        Use at least 8 characters, including a number.
      </span>
    </span>
  </div>
</template>

One call covers every .UIql in root, including ones added later — so for an app-wide setup you can also call initQuestionTooltips() once at the root instead of per component.