Looking to create a dynamic tooltip without any fixed widths or constraints on the parent element.
The process seems simple enough, but I'm facing an issue with centering the after element due to an existing transform attribute of transform: translateY(10px).
Unable to use the standard
left:50%; top:50%; transform: translate(-50%, -50%)'Is this the root of the problem? Or should I investigate elsewhere?
If you have any suggestions or advice, feel free to share!
Also, just so you know, it's in vue; everything should be defined in the style section anyway.
Cheers!
Tooltip.vue
<script lang="ts">
import { defineComponent, computed } from 'vue'
export default defineComponent({
props: {
text: { type: String, default: 'Pop!' },
backgroundColor: { type: String, default: '#000' },
textColor: { type: String, default: '#fff' },
},
setup(props) {
const text = computed(() => props.text)
return { text }
},
})
</script>
<template>
<span :data-tooltip="text">
<slot />
</span>
</template>
<style lang="sass">
[data-tooltip]
position: relative
cursor: default
&:after
position: absolute
width: max-content
// left: calc(50% )
bottom: 125%
text-align: center
box-sizing: border-box
display: flex
justify-content: center
content: attr(data-tooltip)
color: v-bind(textColor)
background: v-bind(backgroundColor)
padding: 8px
border-radius: 1em
font-weight: bold
white-space: nowrap
visibility: hidden
opacity: 0
transform: translateY(10px)
transition: all 400ms
// transition: opacity 500ms, transform 500ms
&:hover::after
opacity: 1
visibility: visible
transform: translateY(0)
</style>