mirror/hotomoe
1
0
Fork 0
mirror of https://github.com/hotomoe/hotomoe synced 2024-11-28 14:58:15 +09:00
Code

Update tooltip.vue

Browse Source
This commit is contained in:
syuilo 2021-10-24 14:39:24 +09:00
parent c08d959b59
commit 2b4d5b73b9
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/client/components/ui/tooltip.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<transition name="tooltip" appear @after-leave="$emit('closed')"> <transition name="tooltip" appear @after-leave="$emit('closed')">
<div class="buebdbiu _acrylic _shadow" v-show="showing" ref="content"> <div class="buebdbiu _acrylic _shadow" v-show="showing" ref="content" :style="{ maxWidth: maxWidth + 'px' }">
<slot>{{ text }}</slot> <slot>{{ text }}</slot>
</div> </div>
</transition> </transition>
@ -21,7 +21,12 @@ export default defineComponent({
text: { text: {
type: String, type: String,
required: false required: false
} },
maxWidth: {
type: Number,
required: false,
default: 250,
},
}, },
emits: ['closed'], emits: ['closed'],
@ -75,11 +80,12 @@ export default defineComponent({
.buebdbiu { .buebdbiu {
position: absolute; position: absolute;
z-index: 11000; z-index: 11000;
max-width: 240px;
font-size: 0.8em; font-size: 0.8em;
padding: 8px 12px; padding: 8px 12px;
box-sizing: border-box;
text-align: center; text-align: center;
border-radius: 4px; border-radius: 4px;
border: solid 0.5px var(--divider);
pointer-events: none; pointer-events: none;
transform-origin: center bottom; transform-origin: center bottom;
} }