thepaperpilot/chromatic-lattice
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Fixed tooltips' classes and style props

Browse source
This commit is contained in:
thepaperpilot 2022-04-23 21:23:51 -05:00
parent 8add09841e
commit ba2bb3a5fd
1 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/features/tooltips/Tooltip.vue
View file

@ -1,11 +1,10 @@
<template>
<div
class="tooltip-container"
:class="{ shown: isShown, ...unref(classes) }"
:class="{ shown: isShown }"
@mouseenter="isHovered = true"
@mouseleave="isHovered = false"
@click.capture="togglePinned"
:style="unref(style)"
>
<slot />
<component v-if="elementComp" :is="elementComp" />
@ -17,12 +16,16 @@
top: unref(direction) === TooltipDirection.UP,
left: unref(direction) === TooltipDirection.LEFT,
right: unref(direction) === TooltipDirection.RIGHT,
bottom: unref(direction) === TooltipDirection.DOWN
}"
:style="{
'--xoffset': unref(xoffset) || '0px',
'--yoffset': unref(yoffset) || '0px'
bottom: unref(direction) === TooltipDirection.DOWN,
...unref(classes)
}"
:style="[
{
'--xoffset': unref(xoffset) || '0px',
'--yoffset': unref(yoffset) || '0px'
},
unref(style) ?? {}
]"
>
<span v-if="showPin" class="material-icons pinned">push_pin</span>
<component v-if="comp" :is="comp" />
@ -142,6 +145,10 @@ export default defineComponent({
word-break: break-word;
}
.tooltip :deep(hr) {
margin: var(--feature-margin) 0;
}
.shown {
z-index: 10;
}