tooltips

@ Svelte-Plugins / Infarts

Une action et un composant simple à ouvrages conçus pour Svelte.

Essayez-le dans le Svelte REPT.

Installer

yarn add @svelte-plugins/tooltips

# or with NPM

npm i @svelte-plugins/tooltips

# or with PNPM

pnpm i @svelte-plugins/tooltips

Utilisation du composant info-bulle

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

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

Utilisation de l'action Info-Tool

< 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

Accessoires

Soutenir	Description	Valeur
action	L'action qui déclenche l'influence (survolez	faire un clic
animation	L'animation à s'appliquer à l'info-bulle	string (par défaut: ``)
flèche	Si false , la flèche info-bulle ne sera pas affichée.	boolean (par défaut: true )
autoposition	Ajustez la position de l'info-bulle si la décharge de la fenêtre se produit	boolean (par défaut: false )
contenu	La chaîne ou l'objet contenant des composants et des accessoires	string
retard	Le retard d'animation en millisecondes à s'appliquer à l'info-bulle	number (par défaut: 200 )
HideNclickoutside	Cache une info-bulle lorsqu'un clic extérieur se produit	boolean (par défaut: false )
maxaigrité	La largeur maximale autorisée du contenu info-bulle	number (par défaut: 200 )
position	La position où l'info-bulle doit apparaître par rapport à son parent	string (par défaut: top )
montrer	Vous permet de contrôler manuellement la visibilité de l'info-bulle	boolean (par défaut: false )
style	L'objet contenant des remplacements de variable de thème	object (par défaut: null )
thème	Le nom de la classe de thème CSS	string (par défaut: ``)

En utilisant des composants comme contenu

Soutenir	Description	Valeur
contenu.	Composant svelte	component (par défaut: null )
contenu.props	Toute composante proméde	object (par défaut: null )

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

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

Thème

Vous pouvez personnaliser le thème des info-bulles à l'aide de plusieurs méthodes:

• Attribuez un nom de classe de thème via la propriété theme qui inclut toutes vos variables CSS.
• Définissez les remplacements directement à l'aide de la propriété style
• Remplacer les variables CSS dans le monde entier

Variables CSS info-bulle:

 --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 ;

Utilisation de la propriété thème

// 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 >

En utilisant la propriété de style

// 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

Licence

Mit