호버에 데이터 속성을 표시하는 방법은 무엇입니까?

Question

여기 내 피들입니다. http://jsfiddle.net/v5xR2/

기본적으로 하루에 수입을 표시하는 차트가 있습니다. 차트는 최대 너비 250px를 기준으로 CSS로 그려집니다.

data-value 속성을 표시하는 방법을 알아 내려고 시도 중입니다.

스타일과 고급 옵션에 대한

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

, 당신이 단지 선언하는 (jQuery UI Tooltip를 사용하는 것이 좋습니다 것 :

Answer 1

나는

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 2

가장 기본적인 대답은 호버에 툴팁을 발표 할 예정이다 대부분의 브라우저에서 title 속성을 사용하는 것입니다 귀하의 페이지 상단에 있으며, 여전히 제목 속성을 사용하므로 매우 쉽게 구현할 수 있습니다.

데모 :http://jsfiddle.net/v5xR2/1/

Answer 3

jQuery를 사용하지 않고이 작업을 수행 할 수 있습니다이 CSS를 사용하여, 플러스 position:relative;.day에 추가 것

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

.

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; 
} 

여기서 중요한 것은 생성 된 콘텐츠입니다. Internet Explorer8 이상에서이 기능을 사용할 수 있습니까 (http://caniuse.com/css-gencontent).