feat(TooltipProvider): content configuration #2180
Conversation
commit: |
J-Michalek
changed the title
There was a problem hiding this comment.
In TooltipContentImpl.vue it's better to use useForwardProps to fix undefined boolean casting curse 😄
Boolean Casting Curse in Vue is undefined boolean props will transfer to false instead of staying undefined
const props = withDefaults(defineProps<TooltipContentImplProps>(), {
side: 'top',
sideOffset: 0,
align: 'center',
avoidCollisions: true,
collisionBoundary: () => [],
collisionPadding: 0,
arrowPadding: 0,
sticky: 'partial',
hideWhenDetached: false,
})
const delegatedProps = reactiveOmit(props, ['ariaLabel'])
const popperContentProps = computed(() => defu(delegatedProps.value, providerContext.content.value ?? {}))
const forwarded = useForwardProps(popperContentProps)Then use forwarded like
- v-bind="{ ...$attrs, ...popperContentProps }"
+ v-bind="{ ...$attrs, ...forwarded }"Related PR #610
vuejs/vue#4792
|
I've tried refactoring this, but it does not work as intended - the |
|
@sadeghbarati Just checking in if there are some changes to be done or if this can be merged. |
|
Hello 👋 Zernonia is the maintainer I can only merge the small PRs 😁 |
|
Im hesitant to this feature actually. Wouldn't it be much simpler if you create a generic Tooltip component (with defined Content configuration), and use it like that? |
|
@zernonia I totally get your point, but my use case comes from using NuxtUI, which by default uses the bottom side for tooltips. Being able to configure it like this seems like a better solution than creating arbitrary components with predefined props. If I was using RekaUI directly for tooltips then I would handle it in the component myself. |
3 participants
Resolves #2179