<script setup lang="ts">
defineProps<{text:string}>();const uid=`kbx-tooltip-${Math.random().toString(36).slice(2)}`
</script>
<template><span class="kbx-tooltip" tabindex="0" :aria-describedby="uid"><slot/><span :id="uid" class="kbx-tooltip__bubble" role="tooltip">{{text}}</span></span></template>
<style scoped>.kbx-tooltip{position:relative;display:inline-flex}.kbx-tooltip__bubble{position:absolute;z-index:40;left:50%;bottom:calc(100% + var(--kbx-space-2));transform:translateX(-50%);width:max-content;max-width:var(--kbx-tooltip-max-width);padding:var(--kbx-space-1) var(--kbx-space-2);border-radius:var(--kbx-radius-sm);background:var(--kbx-gray-900);color:white;font-size:var(--kbx-font-xs);line-height:1.4;opacity:0;pointer-events:none}.kbx-tooltip:hover .kbx-tooltip__bubble,.kbx-tooltip:focus-visible .kbx-tooltip__bubble,.kbx-tooltip:focus-within .kbx-tooltip__bubble{opacity:1}</style>
