feat(Tooltip): adding option to show popper arrow (#868)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Conner
2023-10-26 08:41:42 -05:00
committed by GitHub
parent 8ba2a791e4
commit 4ce23746da
8 changed files with 65 additions and 13 deletions

View File

@@ -988,14 +988,14 @@ export const slideover = {
export const tooltip = {
wrapper: 'relative inline-flex',
container: 'z-20',
container: 'z-20 group',
width: 'max-w-xs',
background: 'bg-white dark:bg-gray-900',
color: 'text-gray-900 dark:text-white',
shadow: 'shadow',
rounded: 'rounded',
ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
base: '[@media(pointer:coarse)]:hidden h-6 px-2 py-1 text-xs font-normal truncate',
base: '[@media(pointer:coarse)]:hidden h-6 px-2 py-1 text-xs font-normal truncate relative',
shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5',
// Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
transition: {
@@ -1008,6 +1008,14 @@ export const tooltip = {
},
popper: {
strategy: 'fixed'
},
arrow: {
base: 'before:w-2 before:h-2',
ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-800',
rounded: 'before:rounded-sm',
background: 'before:bg-white dark:before:bg-gray-900',
shadow: 'before:shadow',
placement: 'group-data-[popper-placement=right]:-left-1 group-data-[popper-placement=left]:-right-1 group-data-[popper-placement=top]:-bottom-1 group-data-[popper-placement=bottom]:-top-1'
}
}