php页面加悬浮通知,php+html表格内容悬浮提示功能的实现

目前的页面常用在Chrome下打开， 有一列的的字段值会出现过长的字符导致该列表格被填充拉长，而且当页面拖动放大时，还会出现换行的情况，导致所有单元格的行高跟着拉伸，影响美观。如下图所示

计划将第六列的内容按一定的方式缩减，必要时显示全部字符。

方案一： 用tooltip做悬浮提示

toolip 是CSS中的一种样式，专门做悬浮框，支持很多自定义的风格，上图是一个顶部提示框带底部箭头的悬浮框。

代码如下：

styles.css 中新增：

.tooltip {

position: relative;

display: inline-block;

border-bottom: 1px dotted black;

}

.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

background-color: black;

color: #fff;

text-align: center;

border-radius: 6px;

padding: 5px 0;

position: absolute;

z-index: 1;

bottom: 150%;

left: 50%;

margin-left: -60px;

}

.tooltip .tooltiptext::after {

content: "";

position: absolute;

top: 100%;

left: 50%;

margin-left: -5px;

border-width: 5px;

border-style: solid;

border-color: black transparent transparent transparent;

}

.tooltip:hover .tooltiptext {

visibility: visible;

}

修改index.php

<<<

echo "

".$this_visn."";

>>>

echo "

".substr($this_visn,0,20)." $this_visn";

这样就是直接在td 中增加一种div 样式，重新组织内容，缺点也很明显，当Chrome 页面拖大的时候，行高会出现错位，还没找到好的解决办法，所以放弃了。

方案二： 直接在td中调用设置title属性

这种方式简单快捷，它也属于tooltip的一种，但是不用额外定义tooltip 的CSS样式。效果如下：

附上代码：

<<<

echo "

".$this_visn."";

>>>

if(strlen($this_visn) <= "20") {

echo "

".$this_visn."";

} else {

echo "

".substr($this_visn,0,20)."";

}

这种方式修改更简洁，同样能达到需求，并且加了一个字符判断，只针对字符长度超过20的字符串作截断悬浮处理。

原文：https://www.cnblogs.com/dreamcode-dreamlife/p/14329251.html