BaseTooltip

import BaseTooltip from "@wikicasa-dev/components/UIKit/BaseTooltip";

Use it for a short explanation attached to a small trigger, typically an "i" icon next to a price estimate or a label. It opens on mouse hover only (pure CSS, no JavaScript positioning), so it is a desktop affordance: keep the information available elsewhere for touch and keyboard users. For longer content or anything interactive, use BaseModal.

#Usage

<script setup lang="ts">
import BaseTooltip from "@wikicasa-dev/components/UIKit/BaseTooltip";
</script>

<template>
  <p style="display: flex; align-items: center; gap: 5px">
    Prezzo stimato: 320.000 €
    <BaseTooltip :theme="{ color: 'blue', size: 'md' }">
      <template #trigger>
        <button type="button" aria-label="Come calcoliamo la stima">i</button>
      </template>
      <template #content>
        <p style="margin: 0; padding: 0 10px">
          Stima basata su annunci simili in zona e dati OMI.
        </p>
      </template>
    </BaseTooltip>
  </p>
</template>

#Do / Don't

• theme must be passed whole: { color: 'blue' | 'white', size: 'sm' | 'md' | 'lg' } (default blue / sm). Use white on colored backgrounds.
• Sizes have a fixed width and height (sm 250×65px, md 300×100px, lg 350×130px). Pick the size that fits the text; content does not grow the box.
• The tooltip always opens below the trigger. direction only moves the arrow (top, top-center, bottom, bottom-center, left, right); use top or top-center to point at the trigger.
• Fine-tune the box position with tooltipContentClasses: a class of your own setting top/left with !important.
• Make the trigger a real <button> with an aria-label.

#Styling hooks

Set with inline style on the component (a class needs to be more specific than .base-tooltip, which defines them): --tooltip-sm-content-width (md/lg widths derive from it), --tooltip-sm-height, --tooltip-md-height, --tooltip-lg-height, --tooltip-border-radius, --tooltip-blue-bg, --tooltip-blue-color, --tooltip-white-bg, --tooltip-white-color, --arrow-left-position.

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
theme	{ color: "blue" | "white"; size: "lg" | "sm" | "md"; }	{ color: "blue", size: "sm", }
direction	"top" | "bottom" | "left" | "right" | "top-center" | "bottom-center"	"top"
customTooltipClass	"" | "mail-alert"	""
showTooltipContentManually	boolean	true
tooltipContentClasses	ClassTypeProp	""

Events

None.

v-model

None.

Slots

Name	Slot props
trigger
content

Exposed (template ref)

None.