tooltips

@Selte-Plugins/Tooltips

Eine einfache Tooltip -Aktion und -Komponente für Svelte.

Probieren Sie es in der Sufle Repl.

Installieren

yarn add @svelte-plugins/tooltips

# or with NPM

npm i @svelte-plugins/tooltips

# or with PNPM

pnpm i @svelte-plugins/tooltips

Verwenden der Tooltip -Komponente

< script >
  import { Tooltip } from " @svelte-plugins/tooltips " ;
</ script >

< Tooltip content = " Hello world! " >
 Check out my tooltip
</ Tooltip >

Verwenden der Tooltip -Aktion

< script >
  import { tooltip } from " @svelte-plugins/tooltips " ;
</ script >

Checkout out my < u title = " Hello World! " use:tooltip >tooltip</ u >

Checkout out my < u use:tooltip ={{ content : ' Hello World! ' }}>tooltip</ u >

API

Requisiten

Stütze	Beschreibung	Wert
Aktion	Die Aktion, die den Tooltip auslöst (schweben Sie	klicken
Animation	Die Animation, die für den Tooltip angewendet werden soll	string (Standard: ``)
Pfeil	Wenn false , wird der Tooltip -Pfeil nicht angezeigt.	boolean (Standard: true )
Autoposition	Passen Sie die Tooltip -Position an, wenn das Ansichtsfenster -Ausschnitt auftritt	boolean (Standard: false )
Inhalt	Die Zeichenfolge oder das Objekt, das Komponentref und Requisiten enthält	string
Verzögerung	Die Animationsverzögerung in Millisekunden, die für den Tooltip angewendet werden soll	number (Standard: 200 )
Hideonclickoutside	Verbirgt einen Tooltip, wenn ein Außenklick auftritt	boolean (Standard: false )
Maxwidth	Die maximale zulässige Breite des Tooltip -Inhalts	number (Standard: 200 )
Position	Die Position, in der der Tooltip relativ zu seinem Elternteil erscheinen sollte	string (Standard: top )
zeigen	Ermöglicht es Ihnen, die Tooltip -Sichtbarkeit manuell zu steuern	boolean (Standard: false )
Stil	Das Objekt, das Themenvariable enthält, überschreibt	object (Standard: null )
Thema	Der CSS -Themenklassenname	string (Standard: ``)

Verwenden von Komponenten als Inhalt

Stütze	Beschreibung	Wert
content.comPonent	Suflte -Komponente	component (Standard: null )
Content.Props	Alle Komponentenvorschriften	object (Standard: null )

< script >
  import ComponentAsTooltip from ' ./ComponentAsTooltip ' ;
</ script >

Checkout out my < span use:tooltip ={{ content : { component : ComponentAsTooltip , props : { title : ' Hello World! ' } } }}>tooltip</ span >

Themen

Sie können das Tooltips -Thema mit verschiedenen Methoden anpassen:

• Weisen Sie einen Themenklassennamen über die theme zu, die alle Ihre CSS -Variablen überschreibt
• Definieren Sie die Überschreibungen direkt mit der style -Eigenschaft
• Überschreiben Sie die CSS -Variablen weltweit

Tooltip CSS -Variablen:

 --tooltip-arrow-size : 10 px ;
--tooltip-background-color : rgba ( 0 , 0 , 0 , 0.9 );
--tooltip-border-radius : 4 px ;
--tooltip-box-shadow : 0 1 px 20 px rgba ( 0 , 0 , 0 , 0.25 );
--tooltip-font-family : -apple-system , BlinkMacSystemFont , 'Segoe UI' , Roboto , Oxygen-Sans , Ubuntu , Cantarell ,
  'Helvetica Neue' , sans-serif;
--tooltip-font-size : 14 px ;
--tooltip-font-weight : 500 ;
--tooltip-line-height : 1.25 rem ;
--tooltip-color : # fff ;
--tooltip-offset-x : 12 px ;
--tooltip-offset-y : 12 px ;
--tooltip-padding : 12 px ;
--tooltip-white-space-hidden : nowrap;
--tooltip-white-space-shown : normal;
--tooltip-z-index : 100 ;

Verwenden der Themeneigenschaft

// action
< span title = "hello world!" use:tooltip ={{ theme : ' custom-tooltip ' }}>Hover over me</ span >

// component
< Tooltip content = " hello world! " theme = " custom-tooltip " >Hover over me</ Tooltip >

< style >
  :global( .tooltip.custom-tooltip ) {
    --tooltip-background-color : hotpink ;
    --tooltip-box-shadow : 0 1 px 8 px pink ;
  }
</ style >

Verwenden der Style -Eigenschaft

// action
< span title = "hello world!" use:tooltip ={{ style : { backgroundColor : ' blue ' , borderRadius : ' 10px ' } }}>Hover over me</ span >

// component
< Tooltip content = "hello world!" style ={{ style : { backgroundColor : ' blue ' } }}>Hover over me</ Tooltip >

Changelog

Changelog

Lizenz

MIT