自定义实现鼠标悬停文字的汽泡提示

王可心要学习！！！

已于 2023-11-22 01:11:53 修改

阅读量168

点赞数

文章标签：前端笔记

于 2023-11-22 01:09:34 首次发布

本文链接：https://blog.csdn.net/2301_77620227/article/details/134544251

版权

<template>
  <div style="background-color: aquamarine; width: 600px; height: 200px">
    <div class="tooltip">
      <div
        class="textoverflow"
        data-title="我是一段超长的文字我是一段超长的文字我是一段超长的文字我是一段超长的文字"
      >
        我是一段超长的文字我是一段超长的文字我是一段超长的文字我是一段超长的文字
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped  lang="less">
.tooltip {
  position: relative;
  display: inline-block;
  border: 1px solid transparent;
  width: 200px;
  margin: 60px;
}
.textoverflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.textoverflow::after {
  content: attr(data-title);
  visibility: hidden;
  width: 300px;
  white-space: pre-wrap;
  background-color: #fff;
  color: #666;
  font-size: 14px;
  text-align: left;
  border-radius: 6px;
  padding: 5px;
  margin-top: 10px;
  position: absolute;
  z-index: 2;
  top: 100%;
  left: 50%;
  transform: translate(-50%);
  opacity: 0;
  transition: opacity 2s;
  border-color: transparent #fff transparent transparent;
}

.textoverflow:hover::after {
  visibility: visible;
  opacity: 1;
}
.textoverflow:hover::before {
  visibility: visible;
  opacity: 1;
}
.textoverflow::before {
  visibility: hidden;
  opacity: 0;
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  transition: opacity 2s;
  border-width: 5.5px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}
</style>