[css] 第324天 使用css实现悬浮提示文本

[haizhilin2013]

第324天 使用css实现悬浮提示文本

我也要出题

[xiangshuo1992]

不知道有没有理解题意

<div class="wrap">
    我是一个元素
    <div class="tips">
      这是悬浮提示文字
    </div>
</div>

<style>
  .wrap {
    position: relative;
    display: inline-block;
    margin: 4em;
  }

  .tips {
    position: absolute;
    top: -2em;
    left: 50%;
    display: none;
    white-space: nowrap;
    transform: translate(-50%,0);
  }

  .wrap:hover .tips {
    display: block;
  }
</style>

[haizhilin2013]

不知道有没有理解题意

<div class="wrap">
    我是一个元素
    <div class="tips">
      这是悬浮提示文字
    </div>
</div>

<style>
  .wrap {
    position: relative;
    display: inline-block;
    margin: 4em;
  }

  .tips {
    position: absolute;
    top: -2em;
    left: 50%;
    display: none;
    white-space: nowrap;
    transform: translate(-50%,0);
  }

  .wrap:hover .tips {
    display: block;
  }
</style>

理解对了！还可以使用伪类，content: attr()获取自定义标签的内容等方法。
嘿嘿，有些日子没答题啰

[ferrinweb]

直接把下方代码粘贴至本页源码中即可预览：

<div class="tips-demo" data-tips="提示文本">演示文本</div>

<style>
.tips-demo {
  position: fixed;
  bottom: 15px;
  right: 15px;
}

.tips-demo:after {
    content: attr(data-tips);
    position: absolute;
    top: 0;
    left: 0;
	right: 0;
	margin: 0 auto;
    white-space: nowrap;
	opacity: 0;
    transform: translateY(-150%);
    transition: .1s;
}

.tips-demo:hover:after {
	opacity: 1;
    transform: translateY(-100%);
}
</style>

[longhui520]

    .element{
            position: relative;
            margin-top: 100px;
        }
        .element:hover::before{
           position: absolute;
           content: attr(tips);
           left:0;
           top:-20px;
          border: 1px solid#eee;
          border-radius: 5px;
        }

[jasonzhouu]

html

<div class="haveTips" tips='hello world'>Lorem ipsum dolor</div>

css

div.haveTips {
    background-color: #F7F5F1;
    color: #BBA985;
    font-family: sans-serif;
    padding: 1em;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
}

div.haveTips::after {
    content: attr(tips);
    padding: 5px;
    background-color: #B4A078;
    box-shadow: 0 0 5px #B4A078;
    color: white;
    min-width: 5em;
    max-width: 100%;
    text-align: center;
    border-radius: 5px;

    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, -10px);

    opacity: 0;
    transition: all 0.5s;
}

div.haveTips:hover::after {
    opacity: 1;
}

div.haveTips::before {
    content: '';

    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top-color: #B4A078;

    position: absolute;
    top: -10px;
    left: calc(50% - 6px);

    opacity: 0;
    transition: all 0.5s;
}

div.haveTips:hover::before {
    opacity: 1;
}

原理

和对话气泡类似，提示框也由矩形和小三角组成。

1. 使用选择器::after创建的伪元素作为提示框

• 使用选择器:hover::after设置样式，使其悬浮时显示
• 结合absolute position和transform translate将提示框放到期望的位置：水平方向中心对其，垂直方向隔开一定空隙。
  • bottom: 100%，使其放在父组件的上边界之外，下边缘位于父组件的上边缘
  • left: 50%，使其左边缘位于父组件的中心线
  • translate(-50%, -10px)，左移自身宽度的50%，上移10px，与父组件保持一点距离
  • content: attr(tips)，获取html标签的tips属性作为内容，方便在html标签内指定提示框内容

2. 使用选择器::before创建的伪元素作为小三角形箭头

• 利用border属性创建三角形，参考构建三角形的方法
• 使用上述类似的移动方法，将其移到期望位置
• 使用上述一样的方法，使其悬浮时显示

在左右移动时，同时用了 left 和 translate 这2个属性，它们的功能类似，为什么不只用 left呢？

因为它们的百分比计算基数不同：

• left的基数是父组件的宽度
• translate的基数是自身的宽度

两个结合起来，可以使提示框与父组件中心对齐。

---

参考：https://lhammer.cn/You-need-to-know-css/#/zh-cn/poptip