悬停时显示工具提示
Show tooltip on hover
Fiddle:http://jsfiddle.net/G38nx/
所以我有这张桌子。我想在滚动某些 td 时显示工具提示。例如,指向值为 27 的单元格应显示工具提示"160cm:70kg"。
有什么简单的方法可以做到吗?
<table>
<tr>
<th></th><th>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th>
</tr>
<tr>
<th>160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
</tr>
<tr>
<th>165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
</tr>
<tr>
<th>170cm</th><td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
</tr>
<tr>
<th>175cm</th><td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
</tr>
</table>
.CSS:
table {
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}
td, th, .ff-fix {
cursor: pointer;
padding: 10px;
position: relative;
}
td:hover::after,
.ff-fix:hover::after {
background-color: #ffa;
content: ''00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
tr:hover{
background-color: #ffa;
}
}
.JS:
function firefoxFix() {
if ( /firefox/.test( window.navigator.userAgent.toLowerCase() ) ) {
var tds = document.getElementsByTagName( 'td' );
for( var index = 0; index < tds.length; index++ ) {
tds[index].innerHTML = '<div class="ff-fix">' + tds[index].innerHTML + '</div>';
};
var style = '<style>'
+ 'td { padding: 0 !important; }'
+ 'td:hover::before, td:hover::after { background-color: transparent !important; }'
+ '</style>';
document.head.insertAdjacentHTML( 'beforeEnd', style );
};
};
firefoxFix();
以下是创建标题的方法。从那时起,应用jQueryUI工具提示相当容易,它允许自定义样式。
http://jsfiddle.net/isherwood/G38nx/25
$('td').each(function () {
var myIndex = $(this).index() + 1;
var myTitle = $(this).closest('tr').find('th').text();
myTitle += ":";
myTitle += $('tr:first-child th:nth-child(' + myIndex + ')').text();
$(this).attr('title', myTitle);
$(this).tooltip();
});
更新:根据您的评论,这是一个包含图像内容和即时(无过渡)显示和隐藏的示例:
http://jsfiddle.net/isherwood/G38nx/31
$(this).tooltip({
content: "<img src='http://placehold.it/50x50' />",
show: false,
hide: false
});
您必须使用数据属性为每个单元格指定图像,例如:
<th data-image-src="<img src='/images/myImage.jpg' />">...</th>
。然后:
$(this).tooltip({
content: $(this).attr('data-img-src'),
show: false,
hide: false
});
demo
.html
<div id="uguu"></div>
jQuery
$("td").hover(function (e) {
var idx = $(this).index();
$("#uguu")
.css("top", $(this).offset().top)
.css("left", $(this).offset().left+40)
.html($(this).siblings("th").text()+":"+$("table tr").first().find("th").eq(idx).text())
.show();
}, function () {
$("#uguu").hide();
});
.css
#uguu {
position:absolute;
display:none;
width:100px;
height:20px;
background-color:#cef;
z-index:400;
border:1px solid ecf;
}
相关文章:
- 悬停工具提示显示详细信息 jquery
- 如何使高图工具提示显示在饼图之外
- 如何使用JS或JQuery使工具提示显示在TD悬停上
- 如何使用 d3.js 使工具提示显示在饼图扇区附近
- 如何通过 Jquery 工具提示显示图像
- 使高图工具提示显示最靠近左侧的点的信息(即在中点不更改)
- 有没有办法强制工具提示显示在输入元素的特定位置
- 高图表工具提示显示额外数据
- 在页面加载时自动对焦 dx文本框 并将 dx工具提示显示为验证消息
- 工具提示显示在第二次悬停之后
- 如何使工具提示显示在每个图像旁边
- 如何确定ng-grid中用于工具提示显示的行索引
- Imagemap:让点击区域的工具提示显示在鼠标窗口上
- 工具提示显示在随机位置
- 显示图工具提示显示x轴的最后日期值,而不是当前值
- 如何防止默认的工具提示显示在svg元素上
- twitter引导工具提示显示在modal后面
- ASP.NET 资源 resx 字符串工具提示显示帮助
- 引导工具提示显示在模态窗口后面
- 浮动工具提示显示在线形图上,而不是条形图上