纯CSS绘制会话气泡

效果如下：

鼠标hover锁的时候出现气泡提示。

 html结构

<div class="lock">
      <i class="el-icon-lock" ></i>
 </div>
<div class="lockTips">修改URL可能会导致关键词排名的浮动，
流量的波动等问题，非必要<span>不建议修改</span>
</div>

css样式

// 锁
.lock {
  position: absolute;
  right: 6px;
  top: 2px;
  .el-icon-lock {
    font-size: 20px;
    color: #666;
  }
}
.lock:hover {
  cursor: pointer;
}
//hover的时候对兄弟节点操作
.lock:hover + .lockTips {
  display: block;
}
.lockTips {
  width: 524px;
  line-height: 40px;
  background: #e6f7ff;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #91d5ff;
  position: absolute;
  z-index: 1000;
  padding: 0px 16px;
  opacity: 1;
  right: 0;
  top: -47px;
  color:rg