<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>
