Update Tooltip.vue #97
Conversation
Added option to set tooltip label with clickable html elements, added delay
| }, | ||
| delay: { | ||
| type: Number, | ||
| default: 0, |
There was a problem hiding this comment.
I would say to go with the default 300ms, as in Atlassian Design System, but I see the props of this component don't actually match the ADS 🤷♂️ so imo go with whatever you want.
There was a problem hiding this comment.
I don't think we should change the default behaviour
| @mouseleave="onMouseLeave"> | ||
| <slot name="label"></slot> | ||
| </span> | ||
| <span v-if=label ref="label" class="label no-click" :disabled="disabled"> |
There was a problem hiding this comment.
There are two tooltips, one being empty.
On Storybook (http://localhost:9001/?path=/story/tooltip--tooltip):
src/components/Tooltip/Tooltip.vue
Outdated
| } | ||
| this.mouseEntered = true; | ||
| setTimeout(() => { | ||
| if (!this.mouseEntered) return; |
There was a problem hiding this comment.
This is a problem only for bigger delays so maybe we can ignore it.
You can for example for 5s delay:
- hover over the button
- wait 1s
- hover away
- wait 3s
- hover back on
- wait 1s
Result: tooltip opens up after 1s from hovering on.
You can get similar effects for closing the tooltip.
|
New story in Storybook with the delay on tooltip would be nice. |
Added story to Storybook |
Added option to set tooltip label with clickable html elements, added delay