profectus/profectus-docs
1
0
Fork 0
Code Issues 12 Pull requests 1 Projects 1 Releases Packages Wiki Activity Actions
profectus-docs/assets/api_modules_features_tooltip.md.745d275c.js

1 line
13 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import{_ as t,c as e,o,N as a}from"./chunks/framework.0799945b.js";const g=JSON.parse('{"title":"Module: features/tooltips/tooltip","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"api/modules/features/tooltip.md","lastUpdated":null}'),l={name:"api/modules/features/tooltip.md"},d=a('<h1 id="module-features-tooltips-tooltip" tabindex="-1">Module: features/tooltips/tooltip <a class="header-anchor" href="#module-features-tooltips-tooltip" aria-label="Permalink to &quot;Module: features/tooltips/tooltip&quot;">​</a></h1><h2 id="interfaces" tabindex="-1">Interfaces <a class="header-anchor" href="#interfaces" aria-label="Permalink to &quot;Interfaces&quot;">​</a></h2><h3 id="basetooltip" tabindex="-1">BaseTooltip <a class="header-anchor" href="#basetooltip" aria-label="Permalink to &quot;BaseTooltip&quot;">​</a></h3><p>• <strong>BaseTooltip</strong>: <code>Object</code></p><p>The properties that are added onto a processed <a href="./tooltip#tooltipoptions">TooltipOptions</a> to create an <a href="./tooltip#tooltip">Tooltip</a>.</p><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th></tr></thead><tbody><tr><td style="text-align:left;"><code>pinned?</code></td><td style="text-align:left;"><code>Ref</code>&lt;<code>boolean</code>&gt;</td></tr></tbody></table><h4 id="defined-in" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in" aria-label="Permalink to &quot;Defined in&quot;">​</a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/tooltips/tooltip.ts#L47" target="_blank" rel="noreferrer">profectus/src/features/tooltips/tooltip.ts:47</a></p><hr><h3 id="tooltipoptions" tabindex="-1">TooltipOptions <a class="header-anchor" href="#tooltipoptions" aria-label="Permalink to &quot;TooltipOptions&quot;">​</a></h3><p>• <strong>TooltipOptions</strong>: <code>Object</code></p><p>An object that configures a <a href="./tooltip#tooltip">Tooltip</a>.</p><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><code>classes?</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a>&lt;<a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type" target="_blank" rel="noreferrer"><code>Record</code></a>&lt;<code>string</code>, <code>boolean</code>&gt;&gt;</td><td style="text-align:left;">Dictionary of CSS classes to apply to this feature.</td></tr><tr><td style="text-align:left;"><code>direction?</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a>&lt;<a href="./../util/common#direction"><code>Direction</code></a>&gt;</td><td style="text-align:left;">The direction in which to display the tooltip</td></tr><tr><td style="text-align:left;"><code>display</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a>&lt;<a href="./feature#coercablecomponent"><code>CoercableComponent</code></a>&gt;</td><td style="text-align:left;">The text to display inside the tooltip.</td></tr><tr><td style="text-align:left;"><code>pinnable?</code></td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">Whether or not this tooltip can be pinned, meaning it&#39;ll stay visible even when not hovered.</td></tr><tr><td style="text-align:left;"><code>style?</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a>&lt;<a href="./feature#stylevalue"><code>StyleValue</code></a>&gt;</td><td style="text-align:left;">CSS to apply to this feature.</td></tr><tr><td style="text-align:left;"><code>xoffset?</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a>&lt;<code>string</code>&gt;</td><td style="text-align:left;">The x offset of the tooltip, in px.</td></tr><tr><td style="text-align:left;"><code>yoffset?</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a>&lt;<code>string</code>&gt;</td><td style="text-align:left;">The y offset of the tooltip, in px.</td></tr></tbody></table><h4 id="defined-in-1" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-1" aria-label="Permalink to &quot;Defined in&quot;">​</a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/tooltips/tooltip.ts#L27" target="_blank" rel="noreferrer">profectus/src/features/tooltips/tooltip.ts:27</a></p><h2 id="type-aliases" tabindex="-1">Type Aliases <a class="header-anchor" href="#type-aliases" aria-label="Permalink to &quot;Type Aliases&quot;">​</a></h2><h3 id="generictooltip" tabindex="-1">GenericTooltip <a class="header-anchor" href="#generictooltip" aria-label="Permalink to &quot;GenericTooltip&quot;">​</a></h3><p>Ƭ <strong>GenericTooltip</strong>: <a href="./feature#replace"><code>Replace</code></a>&lt;<a href="./tooltip#tooltip"><code>Tooltip</code></a>&lt;<a href="./tooltip#tooltipoptions"><code>TooltipOptions</code></a>&gt;, { <code>direction</code>: <a href="./../util/computed#processedcomputable"><code>ProcessedComputable</code></a>&lt;<a href="./../util/common#direction"><code>Direction</code></a>&gt; ; <code>pinnable</code>: <code>boolean</code> ; <code>pinned</code>: <code>Ref</code>&lt;<code>boolean</code>&gt; | <code>undefined</code> }&gt;</p><p>A type that matches any valid <a href="./tooltip#tooltip">Tooltip</a> object.</p><h4 id="defined-in-2" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-2" aria-label="Permalink to &quot;Defined in&quot;">​</a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/tooltips/tooltip.ts#L67" target="_blank" rel="noreferrer">profectus/src/features/tooltips/tooltip.ts:67</a></p><hr><h3 id="tooltip" tabindex="-1">Tooltip <a class="header-anchor" href="#tooltip" aria-label="Permalink to &quot;Tooltip&quot;">​</a></h3><p>Ƭ <strong>Tooltip</strong>&lt;<code>T</code>&gt;: <a href="./feature#replace"><code>Replace</code></a>&lt;<code>T</code> &amp; <a href="./tooltip#basetooltip"><code>BaseTooltip</code></a>, { <code>classes</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a>&lt;<code>T</code>[<code>&quot;classes&quot;</code>]&gt; ; <code>direction</code>: <a href="./../util/computed#getcomputabletypewithdefault"><code>GetComputableTypeWithDefault</code></a>&lt;<code>T</code>[<code>&quot;direction&quot;</code>], <a href="./../util/common#up"><code>Up</code></a>&gt; ; <code>display</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a>&lt;<code>T</code>[<code>&quot;display&quot;</code>]&gt; ; <code>pinnable</code>: <code>T</code>[<code>&quot;pinnable&quot;</code>] extends <code>undefined</code> ? <code>false</code> : <code>T</code>[<code>&quot;pinnable&quot;</code>] ; <code>pinned</code>: <code>T</code>[<code>&quot;pinnable&quot;</code>] extends <code>true</code> ? <code>Ref</code>&lt;<code>boolean</code>&gt; : <code>undefined</code> ; <code>style</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a>&lt;<code>T</code>[<code>&quot;style&quot;</code>]&gt; ; <code>xoffset</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a>&lt;<code>T</code>[<code>&quot;xoffset&quot;</code>]&gt; ; <code>yoffset</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a>&lt;<code>T</code>[<code>&quot;yoffset&quot;</code>]&gt; }&gt;</p><p>An object that represents a tooltip that appears when hovering over an element.</p><h4 id="type-parameters" tabindex="-1">Type parameters <a class="header-anchor" href="#type-parameters" aria-label="Permalink to &quot;Type parameters&quot;">​</a></h4><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th></tr></thead><tbody><tr><td style="text-align:left;"><code>T</code></td><td style="text-align:left;">extends <a href="./tooltip#tooltipoptions"><code>TooltipOptions</code></a></td></tr></tbody></table><h4 id="defined-in-3" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-3" aria-label="Permalink to &quot;Defined in&quot;">​</a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/tooltips/tooltip.ts#L52" target="_blank" rel="noreferrer">profectus/src/features/tooltips/tooltip.ts:52</a></p><h2 id="functions" tabindex="-1">Functions <a class="header-anchor" href="#functions" aria-label="Permalink to &quot;Functions&quot;">​</a></h2><h3 id="addtooltip" tabindex="-1">addTooltip <a class="header-anchor" href="#addtooltip" aria-label="Permalink to &quot;addTooltip&quot;">​</a></h3><p>▸ <strong>addTooltip</strong>&lt;<code>T</code>&gt;(<code>element</code>, <code>options</code>): <a href="./tooltip#tooltip"><code>Tooltip</code></a>&lt;<code>T</code>&gt;</p><p>Creates a tooltip on the given element with the given options.</p><h5 id="type-parameters-1" tabindex="-1">Type parameters <a class="header-anchor" href="#type-parameters-1" aria-label="Permalink to &quot;Type parameters&quot;">​</a></h5><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th></tr></thead><tbody><tr><td style="text-align:left;"><code>T</code></td><td style="text-align:left;">extends <a href="./tooltip#tooltipoptions"><code>TooltipOptions</code></a></td></tr></tbody></table><h5 id="parameters" tabindex="-1">Parameters <a class="header-anchor" href="#parameters" aria-label="Permalink to &quot;Parameters&quot;">​</a></h5><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><code>element</code></td><td style="text-align:left;"><a href="./../util/vue#vuefeature"><code>VueFeature</code></a></td><td style="text-align:left;">The renderable feature to display the tooltip on.</td></tr><tr><td style="text-align:left;"><code>options</code></td><td style="text-align:left;"><code>T</code> &amp; <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#thistypetype" target="_blank" rel="noreferrer"><code>ThisType</code></a>&lt;<a href="./tooltip#tooltip"><code>Tooltip</code></a>&lt;<code>T</code>&gt;&gt; &amp; <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype" target="_blank" rel="noreferrer"><code>Partial</code></a>&lt;<a href="./tooltip#basetooltip"><code>BaseTooltip</code></a>&gt;</td><td style="text-align:left;">Tooltip options.</td></tr></tbody></table><h5 id="returns" tabindex="-1">Returns <a class="header-anchor" href="#returns" aria-label="Permalink to &quot;Returns&quot;">​</a></h5><p><a href="./tooltip#tooltip"><code>Tooltip</code></a>&lt;<code>T</code>&gt;</p><h4 id="defined-in-4" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-4" aria-label="Permalink to &quot;Defined in&quot;">​</a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/tooltips/tooltip.ts#L81" target="_blank" rel="noreferrer">profectus/src/features/tooltips/tooltip.ts:81</a></p><h2 id="components" tabindex="-1">Components <a class="header-anchor" href="#components" aria-label="Permalink to &quot;Components&quot;">​</a></h2><h3 id="tooltip-component" tabindex="-1">Tooltip Component <a class="header-anchor" href="#tooltip-component" aria-label="Permalink to &quot;Tooltip Component&quot;">​</a></h3><h4 id="props" tabindex="-1">Props <a class="header-anchor" href="#props" aria-label="Permalink to &quot;Props&quot;">​</a></h4><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th></tr></thead><tbody><tr><td style="text-align:left;"><code>element</code></td><td style="text-align:left;"><code>VueFeature</code></td></tr><tr><td style="text-align:left;"><code>display</code>*</td><td style="text-align:left;"><code>processedPropType&lt;CoercableComponent&gt;(Object, String, Function)</code></td></tr><tr><td style="text-align:left;"><code>style</code></td><td style="text-align:left;"><code>processedPropType&lt;StyleValue&gt;(Object, String, Array)</code></td></tr><tr><td style="text-align:left;"><code>classes</code></td><td style="text-align:left;"><code>processedPropType&lt;Record&lt;string, boolean&gt;&gt;(Object)</code></td></tr><tr><td style="text-align:left;"><code>direction</code></td><td style="text-align:left;"><code>processedPropType&lt;Direction&gt;(String)</code></td></tr><tr><td style="text-align:left;"><code>xoffset</code></td><td style="text-align:left;"><code>processedPropType&lt;string&gt;(String)</code></td></tr><tr><td style="text-align:left;"><code>yoffset</code></td><td style="text-align:left;"><code>processedPropType&lt;string&gt;(String)</code></td></tr><tr><td style="text-align:left;"><code>pinned</code></td><td style="text-align:left;"><code>Persistent&lt;boolean&gt;</code></td></tr></tbody></table><h4 id="slots" tabindex="-1">Slots <a class="header-anchor" href="#slots" aria-label="Permalink to &quot;Slots&quot;">​</a></h4><table><thead><tr><th style="text-align:left;">Name</th></tr></thead><tbody><tr><td style="text-align:left;"><code>default</code></td></tr></tbody></table>',47),i=[d];function r(c,n,s,p,h,f){return o(),e("div",null,i)}const b=t(l,[["render",r]]);export{g as __pageData,b as default};
Reference in a new issue View git blame Copy permalink