8.5w+
社区成员
- 全部
- 问答
当鼠标滑过时显示单元格内全部内容的问题
一个td内要显示的内容比较多 为了排版美观
想只显示一部分比如只显示前几个字，当鼠标滑过时又弹出一个虚框 显示td的全部内容 鼠标离开后虚框自动关闭
请问这样的效果应该怎么实现
想只显示一部分比如只显示前几个字，当鼠标滑过时又弹出一个虚框 显示td的全部内容 鼠标离开后虚框自动关闭
请问这样的效果应该怎么实现
...全文
当前发帖距今超过3年，不再开放新的回复
发表回复
叮咚叮咚叮叮咚 2004-03-30
用哪个好来，哈哈～～～
sfply 2004-03-30
就是啊
二楼的象网易的代码，一大堆
不过有一个好处就是可以立刻显示
TITLE要停留一段时间才可
二楼的象网易的代码，一大堆
不过有一个好处就是可以立刻显示
TITLE要停留一段时间才可
kisslan 2004-03-30
用它自带的属性不好么???
<table border="1">
<tr>
<td title="aaaaaaaaaaa bbbbbbbbb ccccccccccccc">aaaaaaaaaa</td>
</tr>
</table>
<table border="1">
<tr>
<td title="aaaaaaaaaaa bbbbbbbbb ccccccccccccc">aaaaaaaaaa</td>
</tr>
</table>
多菜鸟 2004-03-30
// Example:
// onMouseOver="toolTip('tool tip text here')";
// onMouseOut="toolTip()";
// -or-
// onMouseOver="toolTip('more good stuff', '#FFFF00', 'orange')";
// onMouseOut="toolTip()";
/*
MOVE this to the <body>:
<div id="toolTipLayer" style="position:absolute; visibility: hidden"></div>
<script language="JavaScript"><!--
initToolTips(); //--></script>
*/
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
offsetX = 0;
offsetY = 20;
var toolTipSTYLE="";
function initToolTips()
{
if(ns4||ns6||ie4)
{
if(ns4) toolTipSTYLE = document.toolTipLayer;
else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;
else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;
if(ns4) document.captureEvents(Event.MOUSEMOVE);
else
{
toolTipSTYLE.visibility = "visible";
toolTipSTYLE.display = "none";
}
document.onmousemove = moveToMouseLoc;
}
}
function toolTip(msg, fg, bg)
{
if(toolTip.arguments.length < 1) // hide
{
if(ns4) toolTipSTYLE.visibility = "hidden";
else toolTipSTYLE.display = "none";
}
else // show
{
if(!fg) fg = "#777777";
if(!bg) bg = "#FFFFFF";
var content =
'<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '"><td>' +
'<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + bg +
'"><td align="center"><font face="sans-serif" color="' + fg +
'" size="-2"> \;' + msg +
' \;</font></td></table></td></table>';
if(ns4)
{
toolTipSTYLE.document.write(content);
toolTipSTYLE.document.close();
toolTipSTYLE.visibility = "visible";
}
if(ns6)
{
document.getElementById("toolTipLayer").innerHTML = content;
toolTipSTYLE.display='block'
}
if(ie4)
{
document.all("toolTipLayer").innerHTML=content;
toolTipSTYLE.display='block'
}
}
}
function moveToMouseLoc(e)
{
if(ns4||ns6)
{
x = e.pageX;
y = e.pageY;
}
else
{
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
}
toolTipSTYLE.left = x + offsetX;
toolTipSTYLE.top = y + offsetY;
return true;
}
// onMouseOver="toolTip('tool tip text here')";
// onMouseOut="toolTip()";
// -or-
// onMouseOver="toolTip('more good stuff', '#FFFF00', 'orange')";
// onMouseOut="toolTip()";
/*
MOVE this to the <body>:
<div id="toolTipLayer" style="position:absolute; visibility: hidden"></div>
<script language="JavaScript"><!--
initToolTips(); //--></script>
*/
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
offsetX = 0;
offsetY = 20;
var toolTipSTYLE="";
function initToolTips()
{
if(ns4||ns6||ie4)
{
if(ns4) toolTipSTYLE = document.toolTipLayer;
else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;
else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;
if(ns4) document.captureEvents(Event.MOUSEMOVE);
else
{
toolTipSTYLE.visibility = "visible";
toolTipSTYLE.display = "none";
}
document.onmousemove = moveToMouseLoc;
}
}
function toolTip(msg, fg, bg)
{
if(toolTip.arguments.length < 1) // hide
{
if(ns4) toolTipSTYLE.visibility = "hidden";
else toolTipSTYLE.display = "none";
}
else // show
{
if(!fg) fg = "#777777";
if(!bg) bg = "#FFFFFF";
var content =
'<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '"><td>' +
'<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + bg +
'"><td align="center"><font face="sans-serif" color="' + fg +
'" size="-2"> \;' + msg +
' \;</font></td></table></td></table>';
if(ns4)
{
toolTipSTYLE.document.write(content);
toolTipSTYLE.document.close();
toolTipSTYLE.visibility = "visible";
}
if(ns6)
{
document.getElementById("toolTipLayer").innerHTML = content;
toolTipSTYLE.display='block'
}
if(ie4)
{
document.all("toolTipLayer").innerHTML=content;
toolTipSTYLE.display='block'
}
}
}
function moveToMouseLoc(e)
{
if(ns4||ns6)
{
x = e.pageX;
y = e.pageY;
}
else
{
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
}
toolTipSTYLE.left = x + offsetX;
toolTipSTYLE.top = y + offsetY;
return true;
}
鼠标悬停表格上显示这一格的全部内容 转自：https://www.jb51.net/article/86347.htm <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document<...script type="text/jav...
实现当鼠标移到表格上时显示这一格的全部内容 想实现这样一个功能，就是在一个...想实现当鼠标移上去的时候可以显示这一行被隐藏的内容。当然这个网上有很多插件，但是我没有用，还是自己写了一个。 css部分 <style> #showbox { width: 150px; ...
js实现当鼠标移到表格上时显示这一格全部内容的代码 想实现当鼠标移上去的时候可以显示这一行被隐藏的内容。当然这个网上有很多插件，但是我没有用，还是自己写了一个。 css部分 <style> #showbox { width: 150px; min-height: 50px; font: 100 14px/1 ...
qtableview 鼠标划过单元格弹出标签显示单元格内容 QStandardItem *item = new QStandardItem(show_content); infoTableModel->setItem(1, 1, item); item->setData(content, Qt::ToolTipRole); 转载于:https://www.cnblogs.com/wangjian8888/p/1...
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部 具体代码如下所示： {{item.id}} (item.id) mouseout=mouseoutHander(item.id)> {{item.name.substr(0, 8)}} </templ
Qt QTablewidget 鼠标悬停在单元格上悬浮显示单元格内容 //设置鼠标追踪 connect(ui->tableWidget,SIGNAL(entered(QModelIndex)),this,SLOT(slot_tooltip(QModelIndex))); void Ship_Detection::slot_tooltip(QModelIndex index) { QToolTip::showText(QCursor::...
单元格超过一定长度显示省略号(...)，鼠标悬浮显示全部内容 在实际应用中，有的单元格可能内容较多，如何能做到内容超出一定长度显示省略号(...)，当鼠标移动到单元格的时候，显示全部内容呢？ 2. 解决方案 2.1 方法一（直接用 FineReport 公式实现） 1）在A2...
鼠标移动到某个单元格上后，整个列都变色的实现方法 当鼠标经过时希望实现隔列变色（最好是反色） ，效果示例如下： [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]代码已经帖上来，现在鼠标移动到单元格变色 phx.rows[i].cells[j].onmouseover=function() ...
请问QT中的QTableView如何实现鼠标悬停某单元格可以使用Tooltip来显示该单元格的内容呢 请问QT中的QTableView如何实现鼠标悬停某单元格可以使用Tooltip来显示该单元格的内容呢。请问QT中的QTableView如何实现鼠标悬停某单元格可以使用Tooltip来显示该单元格的内容呢。请问QT中的QTableView如何实现鼠标...
鼠标悬停时表格中有些单元格需要弹窗显示一些额外信息 *2、当鼠标移开此批注单元格，批注信息自动消失； *3、批注信息需要尽量显示完整，所以要求批注单元格在浏览器上方，批注就显示在批注单元格下面，批注单元格在浏览器下方，批注信息就显示在单元格上面； *4、打开的...
ligerui实现鼠标滑过行，显示单元格内容 实现鼠标滑过行时，显示操作表格中的内容，移出时隐藏。 {display : '操作',name : 'operate_list_grid',width:'200', render:function(rowdata, rowindex, value){ var tempSet =''; tempSet+=''; tempSet+=...
单元格超过一定长度显示省略号(...)，鼠标悬浮显示全部内容------finereport 在实际应用中，有的单元格可能内容较多，如何能做到内容超出一定长度显示省略号(...)，当鼠标移动到单元格的时候，显示全部内容呢？ 2. 解决方案 2.1 方法一（公式实现） 注：此方法虽然简单，但报表以其他...
HTML怎么让table表格中的td单元格内容过长显示为固定长度，多余部分用省略号代替，鼠标滑过时显示全文本。 <div style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" title="{{entity.tm}}">{{entity.tm}}</td> 在div中添加样式： ... //不...
EXTJS 4.2 实现 gridpanel 鼠标悬停单元格以提示信息的方式显示单元格内容。 由于gridpanel的单元格里的文字太多时候，都由省略号代替，就想实现如题的功能，经过反复实验，终于搞定了！直接上代码： me.on('itemmouseenter', function (view, record, item, index, e, eOpts) { if ...
表格td内容过多时，td显示省略号，鼠标移入显示全部内容。 两种方式显示： 1.title方式显示： .tb{width:800px;font-size:12px;background:#6887D9} .tb thead th{height:25px;background:#217AC4;color:white} .tb tbody td{height:22px;background:whi
[easyui]datagrid鼠标移动显示单元格内容 当单元格内容过长无法完全显示怎么办？如果鼠标移动到该单元格可以自动显示出所有文字内容就好啦。 这里提供两个思路 给对应节点添加一个title属性，值就是节点的内容 添加事件，移动到单元格就用一个tooltip显示...
dw怎么做html鼠标变化,dw鼠标经过单元格变色 DW 鼠标经过表格 背景变色 DW 鼠标经过表格 背景变色DW怎样实现当鼠标经过表格时改变表格的背景颜色?又怎样应用到想要的行和列 或者某也单元格?。。。给你想要改颜色的单元格取得名字,然后在行为里添加一个onMouseOver事件,事件内容为改变属性...
td文字过长部分显示，鼠标移动显示全部内容 td文字过长部分显示，鼠标移动显示全部内容 只要在该td中加上title属性，鼠标移到这里就会看到全部内容， 在td中加上div，属性设置如下，就能显示宽度为200px的内容，大于则隐藏。代码如下： <td title="我将会...
Ant table中 字段过长溢出显示...时，鼠标滑过显示隐藏内容 renderToptipCol(text: any) { const texts = text let textof = null if (texts !== null && texts !== undefined) { if (texts.length > 20) { textof = texts.substring(20) + '...' ...
html单个单元格颜色,鼠标滑过表格内单个单元格的背景变色特效 很多例子做的是鼠标隔行变色，现在要做的是鼠标滑过表格内的每个单元格变色，而不是整行变色。阿里西西web开发网为大家整理了这篇鼠标滑过表格内单个单元格的背景变色特效，如果这篇文章在您的工作或学习中有帮助，...
finereport-单元格悬停显示图片.cpt模板 finereport9.0的二次开发小功能：类似tooltip功能，鼠标一悬停单元格就显示 图片，移开就 没了，可控制哪个单元格显示.分享.cpt模板文件。本想免费的，csdn必须得要设置1分，纯属分享。。。
element-ui table 给表头添加icon图标，以及鼠标滑过时显示提示内容 参考文章：http://www.voycn.com/article/element-ui-table-geibiaotoutianjiaicontubiaoyijishubiaohuaguoshixianshitishineirong
layui鼠标移动到单元格上显示数据 { field : 'operNm', //title是纯文本 title : '<span title="用户姓名">用户姓名</span>', width : 150, align : 'center', //下面的是从数据库里取出来的...{{d.year}}...
html表单鼠标悬停变色,当我将鼠标悬停在html表格中时,更改单元格中颜色的颜色... 当我将鼠标悬停在它上面时,我试图让单个单元格改变颜色,但是我无法使用我们正在使用的服务访问.css.我被迫删除一个HTML代码框,我可以将我的代码粘贴到我正在更改的元素中,但不是整个.css文件…只是该元素.这是我的...
帆软填报单元格内容过多展示不全，鼠标悬浮单元格提示框展示所有内容 单元格展示内容显示不全，鼠标悬浮后 提示框展示全部，效果如下： 设置，第一步：添加形态： "<span style='white-space: nowrap;text-overflow:ellipsis; overflow:hidden; display: inline-block...
STM32Cube和HAL库使用初体验-第5季第2部分 本季课程主要讲解STM32的全新开发方式：使用STM32CubeMX工具做图形化配置，自动生成初始化代码；添加各种中间件；使用HAL库和LL库来操作外设。结合朱老师物联网大讲堂专为nbiot物联网开发而设计的NB476开发板，本季课程能够让大家彻底掌握物联网时代以nbiot和低功耗STM32L4单片机为代表的典型开发模式，实战意义非常重要。 本课程是《朱有鹏老师单片机完全学习系列课程》第5季第2个课程，本部分以时钟和GPIO模块为案例来讲解STM32CubeMX工具加HAL库加MDK5这套开发体系的流程、技术细节，目标是让大家真正入门HAL库方式开发STM32单片机。后续再接着讲其他更复杂外设。
