@primevue/mcp 4.5.5 → 5.0.0-rc.2

package/data/llms/components/tooltip.md

@@ -0,0 +1,160 @@
+# Tooltip
+
+Tooltip directive provides advisory information for a component. Tooltip is integrated within various PrimeVue components.
+
+## Basic
+
+Tooltip is applied to an element with v-tooltip directive where the value of the directive defines the text of the tooltip.
+
+```vue
+<template>
+    <div class="flex items-center justify-center">
+        <Button v-tooltip.top="{ value: tooltipContent, escape: false, class: 'w-60!' }" type="button" variant="outlined" severity="secondary">Hover me</Button>
+    </div>
+</template>
+
+<script setup>
+const tooltipContent = '<div class="font-semibold text-sm">Quick Tip</div><div class="opacity-75 text-sm mt-1">You can use tooltips to display helpful information on hover.</div>';
+<\/script>
+```
+
+## Position
+
+Position of the tooltip is specified using a modifier. Valid values are top , bottom , right and left . Default position of the tooltip is right .
+
+```vue
+<template>
+    <div class="flex flex-wrap justify-center gap-2">
+        <InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
+        <InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
+        <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="Bottom" />
+        <InputText v-tooltip.left="'Enter your username'" type="text" placeholder="Left" />
+    </div>
+</template>
+```
+
+## Delay
+
+Adding delays to the show and hide events are defined with showDelay and hideDelay options respectively.
+
+```vue
+<template>
+    <div class="flex items-center justify-center gap-4">
+        <Button v-tooltip="{ value: 'Quick Tip', showDelay: 500, hideDelay: 1000 }" type="button" variant="outlined" severity="secondary">500ms Open / 1000ms Close</Button>
+        <Button v-tooltip="{ value: 'Quick Tip', showDelay: 1000, hideDelay: 500 }" type="button" variant="outlined" severity="secondary">1000ms Open / 500ms Close</Button>
+    </div>
+</template>
+```
+
+## Event
+
+Tooltip gets displayed on hover event of its target by default, other option is the focus event to display and blur to hide.
+
+```vue
+<template>
+    <div class="flex flex-wrap justify-center gap-2">
+        <InputText v-tooltip.focus="'Enter your username'" type="text" placeholder="focus to display tooltip" />
+    </div>
+</template>
+```
+
+## Auto Hide
+
+Tooltip is hidden when mouse leaves the target element, in cases where tooltip needs to be interacted with, set autoHide to false to change the default behavior.
+
+```vue
+<template>
+    <div class="flex flex-wrap justify-center gap-2">
+        <InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
+        <InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" />
+    </div>
+</template>
+```
+
+## Custom
+
+Tooltip can use either a plain text or rich HTML content by setting escape to false.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <Button v-tooltip.bottom="{ value: tooltipContent, escape: false }" severity="secondary">Button</Button>
+    </div>
+</template>
+
+<script setup>
+const tooltipContent = \`<div class="flex items-center">
+    <svg width="31" height="33" viewBox="0 0 31 33" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2">
+        <path d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z" fill="var(--p-primary-color)" />
+        <mask id="mask0_1_52" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="33">
+            <path d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z" fill="var(--p-content-background)" />
+        </mask>
+        <g mask="url(#mask0_1_52)">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.1935 0V3.5994V3.58318V20.0075V20.0075V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1935 0Z" fill="var(--p-primary-color)" />
+        </g>
+        <path d="M19.6399 15.3776L18.1861 15.0547L19.3169 16.6695V21.6755L23.1938 18.4458V12.9554L21.4169 13.6013L19.6399 15.3776Z" fill="var(--p-content-background)" />
+        <path d="M10.5936 15.3776L12.0474 15.0547L10.9166 16.6695V21.6755L7.03966 18.4458V12.9554L8.81661 13.6013L10.5936 15.3776Z" fill="var(--p-content-background)" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.3853 16.9726L12.6739 15.0309L13.4793 15.5163H16.7008L17.5061 15.0309L18.7947 16.9726V24.254L17.8283 25.7103L16.7008 26.843H13.4793L12.3518 25.7103L11.3853 24.254V16.9726Z" fill="var(--p-content-background)" />
+        <path d="M19.3168 24.7437L21.4168 22.6444V20.5451L19.3168 22.3214V24.7437Z" fill="var(--p-content-background)" />
+        <path d="M10.9166 24.7437L8.81662 22.6444V20.5451L10.9166 22.3214V24.7437Z" fill="var(--p-content-background)" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M13.0167 5.68861L11.7244 8.7568L13.8244 14.8932H14.7936V5.68861H13.0167ZM15.4397 5.68861V14.8932H16.5706L18.5091 8.7568L17.2167 5.68861H15.4397Z" fill="var(--p-content-background)" />
+        <path d="M13.8244 14.8932L6.87813 12.3094L5.90888 8.27235L11.8859 8.7568L13.9859 14.8932H13.8244Z" fill="var(--p-content-background)" />
+        <path d="M16.5706 14.8932L23.5169 12.3094L24.4861 8.27235L18.3476 8.7568L16.4091 14.8932H16.5706Z" fill="var(--p-content-background)" />
+        <path d="M18.8321 8.27235L22.2245 7.94938L19.9629 5.68861H17.7013L18.8321 8.27235Z" fill="var(--p-content-background)" />
+        <path d="M11.4013 8.27235L8.00893 7.94938L10.2705 5.68861H12.5321L11.4013 8.27235Z" fill="var(--p-content-background)" />
+    </svg>
+    <span> <b>PrimeVue</b> rocks! </span>
+</div>\`;
+<\/script>
+```
+
+## Tooltip Options
+
+Tooltip is also configurable by passing an object as the directive value.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <InputText v-tooltip.left="{ value: 'Enter your username', showDelay: 150, autoHide: false }" type="text" placeholder="hover to display tooltip" />
+    </div>
+</template>
+```
+
+## Accessibility
+
+Screen Reader Tooltip component uses tooltip role and when it becomes visible the generated id of the tooltip is defined as the aria-describedby of the target. Keyboard Support Key Function escape Closes the tooltip when focus is on the target.
+
+## Tooltip API
+
+### Pass Through Options
+
+| Name |Type |Description |
+| --- | --- | --- |
+| root | TooltipDirectivePassThroughOptionType | Used to pass attributes to the root's DOM element. |
+| text | TooltipDirectivePassThroughOptionType | Used to pass attributes to the text's DOM element. |
+| arrow | TooltipDirectivePassThroughOptionType | Used to pass attributes to the arrow's DOM element. |
+| hooks | any | Used to manage all lifecycle hooks. |
+
+### Theming
+
+### CSS Classes
+
+| Class |Description |
+| --- | --- |
+| p-tooltip | Class name of the root element |
+| p-tooltip-arrow | Class name of the arrow element |
+| p-tooltip-text | Class name of the text element |
+
+### Design Tokens
+
+| Token |CSS Variable |Description |
+| --- | --- | --- |
+| tooltip.max.width | --p-tooltip-max-width | Max width of root |
+| tooltip.gutter | --p-tooltip-gutter | Gutter of root |
+| tooltip.shadow | --p-tooltip-shadow | Shadow of root |
+| tooltip.padding | --p-tooltip-padding | Padding of root |
+| tooltip.border.radius | --p-tooltip-border-radius | Border radius of root |
+| tooltip.background | --p-tooltip-background | Background of root |
+| tooltip.color | --p-tooltip-color | Color of root |
+| tooltip.font.weight | --p-tooltip-font-weight | Font weight of root |
+| tooltip.font.size | --p-tooltip-font-size | Font size of root |