Tooltip

Komponent: FTooltip
Status: Produktionsklar

Innehåll

Copy
Tooltip på rubrik
API

Använd tooltip för att visa detaljerad information om ett inmatningsfält i de fall där etikettens rubrik, hjälptext eller formatbeskrivning inte räcker till.

Informationsrutan kan innehålla länkar och expanderbara fält.
Upprepa inte information som redan finns i rubrik eller brödtext.
Använd inte rubriken i tooltip om den inte verkligen behövs.
Flera informationsrutor kan vara öppna samtidigt.
Sträva efter att minimera användning av tooltip. Information som alla behöver veta ska visas med etiketten.

Copy

Omfattande eller komplex information som gäller alla Om informationen är viktig för alla, men så pass omfattande att den inte kan ligga i brödtext, ska den ligga i en tooltip.

Information som är nödvändig för att förstå hur man ska fylla i något ska i första hand vara brödtext. Men om den är för omfattande eller komplex kan den placeras i en tooltip.

Lång eller kort information som bara gäller vissa

Om informationen inte gäller alla, och det inte kan lösas dynamiskt genom att visa texten endast för den relevanta målgruppen ska den ligga i en tooltip även om den är kortfattad.

Komplex information som bara gäller vissa

Ska ligga i tooltip även om den är kortfattad.

Övrig information som bara gäller vissa

Ska ligga i tooltip även om den är kortfattad.

Skärmläsartext

Rubriken för en tooltip formuleras enligt formatet "Information om + namnet på tooltipen".

Om det inte blir en begriplig mening om du använder namnet på tooltipen behöver du formulera om meningen. Till exempel är skärmläsartexten till tooltipen till filuppladdaren "Information om hur du laddar upp bilagor" (och inte "Information om så här laddar du upp bilagor").

Rubriksnivå

Om du behöver använda en semantisk rubriksnivå använd header-tag parametern för att sätta (som standard används ingen semantisk rubrik):

 <f-tooltip
+  header-tag="h3"
 >

Utöver etikett så kan tooltip även placeras på en rubrik.

<div class="tooltip-before">
    <h2>En rubrik</h2>
</div>
<f-tooltip screen-reader-text="Skärmläsartext">
    <template #body> Lorem ipsum dolor sit amet. </template>
</f-tooltip>

API

Props
Name	Description	Type	Required	Default
v-model	State (expanded or collapsed) of the tooltip. The value is `true` if the tooltip is expanded.	boolean	false	‐
screenReaderText	Screen reader text for toggle button	string	true	‐
closeButtonText	Close button text	string	false	TranslationService.provider.translate("fkui.tooltip.close", "Stäng")
headerTag	Element to render for the header element inside the tooltip. Must be set to one of: `div` (default) `span` `h1` `h2` `h3` `h4` `h5` `h6`	string	false	"div"

Events
Name	Description	Properties
update:modelValue	v-model event.	value: boolean — Model value
toggle	Emitted when the state of the tooltip (collapsed/expanded) changes.	event: { isOpen: boolean } — New state of tooltip.

Slots
Name	Description	Bindings
header	Tooltip header content	‐
body	Tooltip body content	‐

Kakor på webbplatsen

Tooltip