- Notifications
You must be signed in to change notification settings - Fork0
Svelte action to display a tooltip
License
untemps/svelte-use-tooltip
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
npm i @untemps/svelte-use-tooltip
<script>import {useTooltip }from'@untemps/svelte-use-tooltip';const_onTooltipClick= (arg,event)=> {console.log(arg,event);};</script><divuse:useTooltip={{position:'right',contentSelector:'#tooltip-template',contentActions: {'*': {eventType:'click',callback:_onTooltipClick,callbackParams: ['ok'],closeOnCallback:true}},containerClassName:`tooltip tooltip-right`,animated:true,animationEnterClassName:'tooltip-enter',animationLeaveClassName:null,enterDelay:100,leaveDelay:100,offset:20}}class="target">Hover me</div><templateid="tooltip-template"><spanclass="tooltip__content">Hi! I'm a <i>fancy</i> <strong>tooltip</strong>!</span></template><style>.target {width:10rem;height:3rem;background-color:white;color:black;display:flex;align-items:center;justify-content:center;box-shadow:005px0rgba(0,0,0,0.5);}.target:hover {cursor:pointer;background-color:black;color:white;}.tooltip__content {background-color:yellow;color:black;}:global(.tooltip) {position:absolute;z-index:9999;max-width:120px;background-color:#ee7008;color:#fff;text-align:center;border-radius:6px;padding:0.5rem;}:global(.tooltip::after) {content:'';position:absolute;margin-left:-5px;border-width:5px;border-style:solid;}:global(.tooltip-right::after) {top:calc(50%-5px);left:-5px;border-color:transparent#ee7008transparenttransparent;}:global(.tooltip-enter) {animation: fadeIn0.2slinearforwards;}@keyframesfadeIn {from {opacity:0;transform:translateX(50px);}to {opacity:1;transform:translateX(0);}}@keyframesfadeOut {to {opacity:0;transform:translateX(-50px);}}</style>
| Props | Type | Default | Description |
|---|---|---|---|
content | string | null | Text content to display in the tooltip. |
contentSelector | string | null | Selector of the content to display in the tooltip. |
contentActions | object | null | Configuration of the tooltip actions (seeContent Actions). |
containerClassName | string | '__tooltip' | Class name to apply to the tooltip container. |
position | string | 'top' | Position of the tooltip. Available values: 'top', 'bottom', 'left', 'right' |
animated | boolean | false | Flag to animate tooltip transitions. |
animationEnterClassName | string | '__tooltip-enter' | Class name to apply to the tooltip enter transition. |
animationLeaveClassName | string | '__tooltip-leave' | Class name to apply to the tooltip leave transition. |
enterDelay | number | 0 | Delay before showing the tooltip in milliseconds. |
leaveDelay | number | 0 | Delay before hiding the tooltip in milliseconds. |
onEnter | func | null | Callback triggered when the tooltip appears. |
onLeave | func | null | Callback triggered when the tooltip disappears. |
offset | number | 10 | Distance between the tooltip and the target in pixels. |
disabled | boolean | false | Flag to disable the tooltip content. |
The tooltip content can be specified either by thecontent prop or thecontentSelector prop.
content must be a text string that will be displayed as is in the tooltip.
It's useful for most of the use cases of a tooltip however sometimes you need to display some more complex content, with interactive elements or formatted text.
To do so, you may use thecontentSelector prop that allows to specify the selector of an element from the DOM.
The best option is to use atemplate HTML element although you may also use a plain element. In this case,it will remain in the DOM and will be clones in the tooltip.
ThecontentActions prop allows to handle interactions within the tooltip content.
Each element inside the content parent may configure its own action since it can be queried using the key-selector.
One event by element is possible so far as elements are referenced by selector. The last one declared in thecontentActions object has precedence over the previous ones.
<script>import {useTooltip }from'@untemps/svelte-use-tooltip';</script><divuse:useTooltip={{contentSelector:'#content',contentActions: {'#button1': {eventType:'mouseenter',callback: (arg)=>console.log(arg),callbackParams: ["Haha you're hovering the button 1"],closeOnCallback:false},'#button2': {eventType:'click',callback: (arg1,arg2)=>console.log(arg1,arg2),callbackParams: ["Haha you've clicked the",'button 2'],closeOnCallback:true}}}}>Hover me</div><spanid="content"><buttonid="button1">Action 1</button><buttonid="button2">Action 2</button></span>
| Props | Type | Default | Description |
|---|---|---|---|
eventType | string | null | Type of the event. All availableevents can be used. |
callback | function | null | Function to be used as event handler. |
callbackParams | array | null | List of arguments to pass to the event handler in. |
closeOnCallback | boolean | false | Flag to automatically close the tooltip when the event handler is triggered. |
If you need the whole tooltip content to be interactive, you can use the special* key:
<script>import {useTooltip }from'@untemps/svelte-use-tooltip';</script><divuse:useTooltip={{content:'Foo',contentActions: {'*': {eventType:'click',callback: (arg)=>console.log(arg),callbackParams: ['Haha you clicked the tooltip'],closeOnCallback:true}}}}>Hover me</div>
If you combine the* selector with other events, its callback will be triggered along with the other ones.
The component can be served for development purpose onhttp://localhost:5173/ running:
npm run dev
Contributions are warmly welcomed:
- Fork the repository
- Create a feature branch
- Develop the feature AND write the tests (or write the tests AND develop the feature)
- Commit your changesusingAngular Git Commit Guidelines
- Submit a Pull Request
About
Svelte action to display a tooltip
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Uh oh!
There was an error while loading.Please reload this page.
Contributors7
Uh oh!
There was an error while loading.Please reload this page.