<template>
  <div class="tooltip" :class="[postiton, theme]">
    <div>{{ text }}</div>
  </div>
</template>

<script>
/**
* 业务组件 - 提示框
* @author 朱琦（1972662943@qq.com）
* @date   时间：2022/1/24
*/
export default {
  name:'ToolTip',
  props: {
    text: {
      type: String,
      default: '提示'
    },
    // 提示框的位置 （暂只支持top、bottom）
    postiton: {
      type: String,
      default: 'top'
    },
    theme: {
      type: String,
      default: 'dark'
    }
  },
  data () {
    return {

    }
  },
}
</script>

<style scoped>
.tooltip {
  position: absolute;
  text-align: center;
  white-space: nowrap;
  min-width: 60px;
  font-size: 12px;
  border-radius: 4px;
  left: 50%;
  padding-bottom: 4px; 
}
.tooltip div {
  padding: 7px 10px;
}

/* 深色 */
.tooltip.dark{
  background: url('../static/images/map-layer/dark/tooltip.png');
  background-size: 100% 100%;
  color: #00edff;
}
/* 浅色 */
.tooltip.light{
  background: url('../static/images/map-layer/light/tooltip.png');
  background-size: 100% 100%;
  color: #6ba9fa;
}
/* top */
.tooltip.top {
  top: 0;
  transform: translate(-50%, -100%);
}
/* bottom */
.tooltip.bottom {
  bottom: 0;
  transform: translate(-50%, 100%) rotateX(180deg);
}
.tooltip.bottom div{
  transform: rotateX(180deg);
}

</style>
