59 lines
1.1 KiB
Vue
59 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<div class="tooltip-container no-select" :style="{ left: horizontalPosition }">
|
||
|
|
<div class="tooltip-content fb" :style="{ backgroundColor: backgroundColor }">
|
||
|
|
<div class="tooltip-arrow" :style="{ borderBottomColor: backgroundColor }"></div>
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'Tooltip',
|
||
|
|
props: {
|
||
|
|
horizontalPosition: {
|
||
|
|
type: String,
|
||
|
|
default: '50%' // 百分比，默认为 50%
|
||
|
|
},
|
||
|
|
backgroundColor: {
|
||
|
|
type: String,
|
||
|
|
default: '#333' // 默认背景颜色
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted () {
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.tooltip-container {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tooltip-content {
|
||
|
|
color: #fff;
|
||
|
|
padding: 5px 8px;
|
||
|
|
border-radius: 4px;
|
||
|
|
position: absolute;
|
||
|
|
white-space: nowrap;
|
||
|
|
transform: translate(-50%, -100%);
|
||
|
|
z-index: 1000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tooltip-arrow {
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
border-left: 5px solid transparent;
|
||
|
|
border-right: 5px solid transparent;
|
||
|
|
border-bottom: 5px solid #333;
|
||
|
|
position: absolute;
|
||
|
|
top: -4px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
}
|
||
|
|
</style>
|