hover显示对应文字内容

需求

需要在div，hover的时候显示指定文字内容

一开始写的

<div class="agg-item border-gray-hover"></div>

.agg-item:hover:after {
    
    
  position: absolute;
  color: #000;
  background-color: #fff;
  border: 1px solid #000;
  //content: attr(title);   //可显示div对应属性的内容
  content: '包含端口GI35,Gi36';
  z-index: 2;
  width: max-content;
  top: 20px;
  height: 20px;
  line-height: 20px;
}

大意了，后来发现有个直接又简单的方法

div的title属性：对div或其它标签设置title属性，作用是当鼠标经过悬停与div或改对象时候显示提示内容，就像对a标签设置title属性相同道理。

在对应的div上加title即可

<div class="agg-item border-gray-hover" title="包含端口GI35,Gi36"></div>