关键词：
本文总结了ExtJS Grid Tooltip的几种实现方法。ExtJS Grid Tooltip可以通过表头提示，单元格提示，行提示以及自己手动添加等方式完成。本文参考了官方FAQ上提供的描述。
ExtJS Grid Tooltip实现之一：表头提示
在2.2里面是设置ColumnModel.tooltip ,3.0则是Column. tooltip 如下:
var grid = new Ext.grid.GridPanel(
columns:[
header:名称,dataIndex:name,tooltip:对象名称,
header:开始时间 - 结束时间 < br/>成功/失败/成功率, dataIndex:sucRate,tooltip:成功/失败/成功率
]
);
ExtJS Grid Tooltip实现之二：单元格提示
1)使用Ext.QuickTips
在开始的时候就执行Ext.QuickTips.init();
然后对需要提示的单元格,重写renderer函数,添加ext:qtitle , ext:qtip这2个属性即可。
这个在官方的FAQ上有详细描述: http://extjs.com/learn/Ext_FAQ_Grid#Add_ToolTip_or_Qtip
//option 1
//========
renderer = function (data, metadata, record, rowIndex, columnIndex, store)
//build the qtip:
var title = Details for + value + - + record.get(month) +
- + record.get(year);
var tip = record.get(sunday_events);
metadata.attr = ext:qtitle=" + title + " + ext:qtip=" + tip + ";
//return the display text:
var displayText = < span style="color: #000;"> + value + < /span>< br /> +
record.get(sunday_events_short);
return displayText;
;
//option 2
//========
renderer = function (data, metadata, record, rowIndex, columnIndex, store)
var qtip = ‘>’;
if(data >= 0)
qtip = ” qtip=’yeah’/>”;
return ‘< span style=”color:green;”’ + qtip + data + ‘%< /span>’;
else if(data < 0)
qtip = ” qtip=’woops’/>”;
return ‘< span style=”color:red;”’ + qtip + data + ‘%< /span>’;
return data;
;
//option 3
//========
var qtipTpl = new Ext.XTemplate(
‘< h3>Phones:< /h3>’,
‘< tpl for=”.”>’,
‘< div>< i>phoneType:< /i> phoneNumber< /div>’,
‘< /tpl>’
);
renderer = function (data, metadata, record, rowIndex, columnIndex, store)
// get data
var data = record.data;
// convert phones to array (only once)
data.phones = Ext.isArray(data.phones) ?
data.phones :
this.getPhones(data.phones);
// create tooltip
var qtip = qtipTpl.apply(data.phones);
metadata.attr = ext:qtitle=" + title + " + ext:qtip=" + tip + ";
//return the display text:
return data;
;
2)使用ToolTip
官方也已经给出方法:
http://extjs.com/forum/showthread.php?p=112125#post112125
http://extjs.com/forum/showthread.php?t=55690
以上给出的方法是可以让一个grid里面的元素共享一个tooltip对象。一般用来做rowtip
不过3.0有更好的方式,如下:
ExtJS Grid Tooltip实现之三：行提示 RowTip
ExtJS3.0新增的方法,设置tooltip的delegate
var myGrid = new Ext.grid.gridPanel(gridConfig);
myGrid.on(‘render’, function(grid)
var store = grid.getStore(); // Capture the Store.
var view = grid.getView(); // Capture the GridView.
myGrid.tip = new Ext.ToolTip(
target: view.mainBody, // The overall target element.
delegate: .x-grid3-row, // Each grid row causes its own seperate show and hide.
trackMouse: true, // Moving within the row should not hide the tip.
renderTo: document.body, // Render immediately so that tip.body can be referenced prior to the first show.
listeners: // Change content dynamically depending on which element triggered the show.
beforeshow: function updateTipBody(tip)
var rowIndex = view.findRowIndex(tip.triggerElement);
if(!Ext.isEmpty(content))
tip.body.dom.innerHTML = "提示信息";
else
return false; //停止执行，从而禁止显示Tip
tip.destroy();
);
);
鼠标悬停效果工具提示
】鼠标悬停效果工具提示【英文标题】：hovereffecttooltipfollowingmouse【发布时间】：2022-01-0618:29:04【问题描述】：我对css没有什么问题，我无法正常使用转换。如果工具提示有更多文本，那么鼠标和工具提示之间的空间就会很大。... 查看详情
将鼠标悬停在工具提示区域上的工具提示指令
】将鼠标悬停在工具提示区域上的工具提示指令【英文标题】：TooltipDirectivewithmouseoverontooltiparea【发布时间】：2018-12-0805:58:14【问题描述】：我的要求是当用户将鼠标悬停在图标上时，应该出现工具提示，并且用户可以点击工具... 查看详情
鼠标悬停（类似于提示）delphi
】鼠标悬停（类似于提示）delphi【英文标题】：Mousehovering(similartohint)delphi【发布时间】：2014-12-1611:36:24【问题描述】：是否有任何事件可以确定鼠标是否悬停在编辑框上方？基本上，我想为用户显示提示/帮助，但我想显示图像... 查看详情
鼠标悬停时的SVG工具提示？
】鼠标悬停时的SVG工具提示？【英文标题】：SVGtooltiponmousehover?【发布时间】：2015-05-1105:43:09【问题描述】：所以我有一个带有标记位置和多边形的SVG地图。使用CSS，这些区域比地图的其余部分更亮，并且在悬停时它们的颜色不... 查看详情
鼠标悬停在 QGraphicsPixmapItem 上后 Qt 显示工具提示
】鼠标悬停在QGraphicsPixmapItem上后Qt显示工具提示【英文标题】：QtDisplaytooltipaftermousehoveronQGraphicsPixmapItem【发布时间】：2014-05-1019:04:47【问题描述】：我正在使用QGraphicView来显示包含QGraphicsPixmapItems的游戏地图。我需要在鼠标悬停... 查看详情
鼠标悬停时的 SVG 地图工具提示，可单击
】鼠标悬停时的SVG地图工具提示，可单击【英文标题】：SVGMaptooltipsonmouseover,abilitytoclick【发布时间】：2016-10-1605:06:49【问题描述】：我创建了一个SVG地图，但是，我想制作它，以便当有人将鼠标悬停在它上面时有一个工具提示... 查看详情
根据行鼠标悬停的条件显示行工具提示
】根据行鼠标悬停的条件显示行工具提示【英文标题】：displayrowtooltiponcondtionbaseonrowmousehover【发布时间】：2013-07-1109:01:12【问题描述】：我在网格渲染事件中使用此代码在行鼠标悬停时显示tplgrid.tip=newExt.ToolTip(view:grid.getView(),tar... 查看详情
谷歌地图 v3 标记鼠标悬停工具提示
】谷歌地图v3标记鼠标悬停工具提示【英文标题】：googlemapsv3markermouseovertooltip【发布时间】：2011-02-0919:33:36【问题描述】：当鼠标悬停在标记上时，我想放置一个用div自己制作的工具提示，但我不知道如何获取屏幕位置以将div放... 查看详情
将鼠标悬停在标题列数据表上时显示工具提示
】将鼠标悬停在标题列数据表上时显示工具提示【英文标题】：ShowTooltipwhenmouseovertheheadercolumndataTable【发布时间】：2014-03-0910:46:08【问题描述】：当鼠标悬停在表头上时如何显示动态表p:dataTable表头的工具提示以显示表头列的整... 查看详情
将鼠标悬停在闪亮的 ggplot 上时的工具提示
】将鼠标悬停在闪亮的ggplot上时的工具提示【英文标题】：ToolTipwhenyoumouseoveraggplotonshiny【发布时间】：2015-03-1323:50:56【问题描述】：我正在构建一个闪亮的应用程序。我正在使用ggplot绘制图表。当我将鼠标悬停在图表上的点上... 查看详情
如何在鼠标悬停时显示工具提示或项目信息？
】如何在鼠标悬停时显示工具提示或项目信息？【英文标题】：howcanIdisplaytooltiporiteminformationonmouseover?【发布时间】：2011-02-2820:08:20【问题描述】：我在一个屏幕上显示5userImage。我想在这些userImage上的mouseover上显示userID和email。... 查看详情
当鼠标悬停在 MFC C++ 中列表控件的列标题上时显示工具提示
】当鼠标悬停在MFCC++中列表控件的列标题上时显示工具提示【英文标题】：DisplayToolTipwhenmousehoveronColumnHeaderofListControlinMFCC++【发布时间】：2017-07-2611:34:45【问题描述】：我有一个场景，当我将鼠标悬停在MFCC++中列表控件的列标题... 查看详情
extjs4 在按钮单击而不是鼠标悬停时显示工具提示
】extjs4在按钮单击而不是鼠标悬停时显示工具提示【英文标题】：extjs4displaytooltiponbuttonclickinsteadofmousehover【发布时间】：2012-12-1223:01:56【问题描述】：我正在尝试在下面的工具提示中添加一个点击监听器。我不希望在鼠标悬停... 查看详情
鼠标悬停时在工具提示中显示全文
】鼠标悬停时在工具提示中显示全文【英文标题】：Showfulltextintooltiponmouseover【发布时间】：2018-06-0201:49:07【问题描述】：我有一个输入，我将长文本绑定到来自AngularJS。我想显示一个省略号，并在mouseover上，在工具提示中显示... 查看详情
在多个滑块元素上捕获鼠标悬停
...我正在尝试跟踪鼠标悬停在轮播滑块每张幻灯片上的工具提示（轮播滑块示例：here）。每张幻灯片都有3-5个可见的工具提示。当鼠标悬停在工具提示上时，会触发一个数据层事件。每个工具提示都有相同的类变量并且没有ID。根... 查看详情
鼠标悬停在a标签出现提示信息(代码片段)
加上title属性<ahref=""title="aaa">bbb</a>效果如下：bbb 查看详情
鼠标悬停在a标签出现提示信息(代码片段)
加上title属性<ahref=""title="aaa">bbb</a>效果如下：bbb 查看详情
如何在primefaces中将工具提示重新定位到左上角或鼠标悬停？(代码片段)
我想更改工具提示在JSF中显示的位置。喜欢左上角或右上角或鼠标悬停。<p:tooltipfor="rowEditButton"value="ClicktoEdit"></p:tooltip>鼠标悬停是我要找的！答案尝试使用primefaces-extension工具提示。它拥有您需要的一切。Primefacesextensio... 查看详情