如何顯示懸停時的數據屬性？

這裏是我的小提琴：http://jsfiddle.net/v5xR2/如何顯示懸停時的數據屬性？

基本上有一個圖表，它顯示收益白天。圖表以css繪製 - 基於250px的最大寬度。

試圖弄清楚如何顯示懸停時的data-value屬性。

來源

2013-12-22 fyz

$（本）。數據（ '值'）？ –

@ adeneo <<是的，就像那樣。但我會修復顏色......感謝邪惡的天才！順便說一下，我們都有共同的議程:) – fyz

顏色只是一個例子，我在答案中加入了「鼠標跟隨」，並用更好的顏色更新了小提琴。 – adeneo

我會做這樣的事情

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

來源

2013-12-22 21:17:33 adeneo

現在是更新的樣式真棒！非常好地完成！ +1添加'鼠標跟蹤' – fyz

控制檯正在吐出一條警告：「event.returnValue已棄用，請使用標準event.preventDefault（）。」這是爲什麼？ – fyz

這是一個內部的jQuery問題，沒什麼好擔心的。 – adeneo

最基本的答案是使用title屬性，它在大多數瀏覽器會出現在懸停提示：

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

對於造型和更先進的方案，我推薦使用jQuery UI Tooltip（剛剛聲明在頁面頂部，它仍然使用標題屬性 - 因此很容易實現）。

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

來源

2013-12-22 21:06:58

沒有使用jQuery，你可以這樣做：

http://jsfiddle.net/v5xR2/2/

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及以上。

來源

2013-12-22 21:08:39

我喜歡你的解決方案。你知道它是否適用於手機嗎？ – fyz

不確定，您可能想爲'.day：focus：after'添加。確保你測試！ –

如何顯示懸停時的數據屬性？

回答

相關問題