Question

基本上有一张按天显示收入的图表。图表以css绘制 - 基于最大宽度250px。

试图找出如何在悬停时显示data-value属性。

Answer 1

不使用jQuery就可以这样做：

enter image description here

使用此CSS，并将position:relative;添加到.day。

day:hover {
  background-color: red;  
}

.day:hover:after {
    content: attr(data-value);
    padding: 4px 8px;
    color: black;
    background-color:white;
    position: absolute;
    left: 0; 
    top: 100%;
    z-index:10;
    border:1px black solid;
    box-shadow:0 0 3px #ccc;
}

这里的主要内容是生成的内容。我可以使用（http://caniuse.com/css-gencontent）显示这可以在IE8及以上版本中使用。

Answer 2

我会做类似

的事情

var chartMAX = 250
var chartMIN = 0
var highestDay = 59332
var lowestDay = 12998
var Earnings = { 1:42541, 2:23086, 3:14243, 4:36765, 5:8998, 6:998, 7:5234, 8:59332, 9:24353, 10:39911, 11:34256, 12:104, 13:12433, 14:9101 }
var chartLineBase = chartMAX / highestDay
var chartLinePxLength = chartLineBase * lowestDay +"px"

$.each( Earnings, function( i, val ) {
    var chartLineBase = chartMAX / highestDay
    var chartLinePxLength = parseInt(chartLineBase * val) +"px"
    var day = $('<div />', {
        'class': 'day',
        id     : i,
        'data-value' : '$'+val/100,
        css    : {width : chartLinePxLength},
        on     : {
            mouseenter: function(e) {
                console.log($(this).data('value'))
                $('<div />', {
                    'class' : 'tip',
                    text : $(this).data('value'),
                    css : {
                        position: 'fixed',
                        top: e.pageY-22,
                        left: e.pageX+2,
                        border: '1px solid red',
                        background: 'yellow'
                    }
                }).appendTo(this);
            },
            mouseleave: function() {
                $('.tip', this).remove();
            },
            mousemove: function(e) {
                $('.tip', this).css({
                    top: e.pageY-22,
                    left: e.pageX+2,
                });
            }
        }
    })
    $("#earnings_chart_frame").append(day);
});

FIDDLE

Answer 3

最基本的答案是使用title属性，在大多数浏览器中，该属性会在悬停时显示工具提示：

"...title=\"$" + val/100 + "\""

对于样式和更高级的选项，我建议使用jQuery UI Tooltip（您只是在页面顶部声明，它仍然使用标题属性 - 因此非常容易实现）。

演示： http://jsfiddle.net/v5xR2/1/

如何在悬停时显示数据属性？

3 个答案: