[英]How to show data in custom tooltip
I have a table looks like below structure. 我有一张表格,看起来像下面的结构。
user_id Payment_status
1 Pending
2 Success
3 Failed
I have created sample example, on hover of user id I am getting user info which I need to show on tooltip, I need a styled tooltip that looks like bootstrap tooltip with data placement top. 我已经创建了示例示例,将鼠标悬停在用户ID上时,我需要在工具提示上显示用户信息,我需要一个样式化的工具提示,其外观类似于带有数据放置顶部的bootstrap工具提示。 Please see this example and TryHere
请看这个例子和TryHere
If you see in console I am getting data of hovered user, I just need to show this data like tooltip and on hover out I need to hide. 如果您在控制台中看到我正在获取悬停用户的数据,则只需要显示此数据(如工具提示),悬停时就需要隐藏。 Please check fiddle and open console.
请检查小提琴并打开控制台。 You will get it.
你会得到的。 Ask me if any info missing.
问我是否缺少任何信息。
Here is JS code 这是JS代码
var orders=[
{id: 1, first_name: "Sud", last_name: "D", phone: "45687889", email: "sud@peace.org"},
{id: 2, first_name: "Mat", last_name: "D", phone: "123456789", email: "mat@peace.org"},
{id: 3, first_name: "Suraj", last_name: "D", phone: "321145789", email: "suraj@peace.org"}
];
$('.user_id').hover(function(){
console.log('hi'+$(this).text());
var current_id=$(this).text();
for (var i =0;i<=orders.length - 1; i++) {
if (orders[i].id==current_id) {
console.log('hi'+orders[i].first_name+'<br>'+orders[i].last_name+'<br>'+orders[i].email);
};
};
})
Html code HTML代码
<table>
<thead>
<tr>
<th>user_id</th>
<th>Payment Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="user_id" href="">1</a></td>
<td>Success</td>
</tr>
<tr>
<td><a class="user_id" href="">2</a></td>
<td>Failed</td>
</tr>
<tr>
<td><a class="user_id" href="">3</a></td>
<td>Pending</td>
</tr>
</tbody>
</table>
if you add this line to your javascript you can see the tooltip 如果您将此行添加到javascript中,则可以看到工具提示
$('.user_id').hover(function(){
console.log('hi'+$(this).text());
var current_id=$(this).text();
for (var i =0;i<=orders.length - 1; i++) {
if (orders[i].id==current_id) {
console.log('hi'+orders[i].first_name+'<br>'+orders[i].last_name+'<br>'+orders[i].email);
$(this).attr('title','hi'+orders[i].first_name+'<br>'+orders[i].last_name+'<br>' +orders[i].email);
};
};
})
I use this tooltip code: 我使用以下工具提示代码:
function ExtractorTooltip() {
//** Tooltip Class **//
this.tooltip = null;
this.tooltipTextContainer = null;
}
ExtractorTooltip.prototype = {
initToolTip: function(_id, _width, _height, _position, _backgroundColor, _borderRadious, _textColor, _fontFamily, _fontSize, _margin, _padding) {
//Create div element
this.tooltip = $('<div></div>').attr('id', _id).css({
width: _width,
height: _height,
position: _position,
background: _backgroundColor,
borderRadius: _borderRadious + 'px',
MozBorderRadius: _borderRadious + 'px',
margin: _margin + 'px',
padding: _padding + 'px',
'z-index': 2147483600
}).appendTo('body');
this.tooltipTextContainer = $('<span></span>').css({
fontFamily: _fontFamily.toString(),
fontSize: _fontSize + 'px',
color: _textColor
}).appendTo(this.tooltip);
this.hide();
},
addTooltipTo: function(_container) {
var self=this;
_container.addEventListener('mouseover', function(event) {
this.show(event.target.getAttribute('filter'));
$(document).on('mousemove.tooltip', function(ev) {
self.tooltip.css({
left: ev.pageX + 'px',
top: ev.pageY + 'px'
});
});
}.bind(this), false);
_container.addEventListener('mouseout', function(event) {
this.hide();
$(document).off('mousemove.tooltip');
}.bind(this), false);
_container.style.border = '3px solid rgb(255,0,0)';
},
show: function(_text) {
this.tooltip.css('display', 'inline');
this.tooltipTextContainer.text(_text);
},
hide: function() {
this.tooltip.css({
display: 'none',
left: 0 + 'px',
top: 0 + 'px'
});
},
};
You can call it like: 您可以这样称呼它:
var extractorTooltip = new ExtractorTooltip();
extractorTooltip.initToolTip('tooltip', 'auto', 20, 'absolute', 'rgba(0, 0, 0, 0.5)', 10, '#ffffff', 'helvetica', 16, 12, 12);
}
$image.attr('filters', 'Filter data:' + filterDescription);
self.extractorTooltip.addTooltipTo($image.get(0));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.