Tooltip
Text
Content displayed inside the tooltip.
<script setup lang="ts">
import { NmorphTooltip, NmorphButton } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="tooltip-text-overview">
<NmorphTooltip text="I am a tooltip">
<NmorphButton text="Hover over me" />
</NmorphTooltip>
</div>
</template>Position
Defines the position of the tooltip relative to the target element. Accepts values such as 'top', 'bottom', 'left', 'right'.
Tooltip
Tooltip
Tooltip
<script setup lang="ts">
import { NmorphTooltip, NmorphButton } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="tooltip-position-overview">
<div class="elements">
<div class="elements__element">
<NmorphTooltip force-show>
<NmorphButton text="Button" />
<template #content>
<div class="content">Tooltip</div>
</template><template #content>
<div class="content">Tooltip</div>
</template><template #content>
<div class="content">Tooltip</div>
</template>Force coordinate
Overrides the default positioning logic and allows specifying exact coordinates for the tooltip.
Tooltip
<script setup lang="ts">
import { NmorphTooltip, NmorphButton } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="tooltip-force-coordinate-overview">
<NmorphTooltip
text="Tooltip"
force-show
position="right"
:force-coordinate="{ x: '200px', y: '50px' }"
>
<NmorphButton text="OK" />
</NmorphTooltip>
</div>
</template>