Question

I’m setting two data values on an image using HTML5 data attributes. jQuery 1.5.2 can read them back correctly but I’m getting undefined for both values using jQuery 1.7.2.

Example jsFiddle: http://jsfiddle.net/rupw/SpEDb/

I check through the documentation for http://api.jquery.com/data/
Suppose the same way of data retrieval should work in v1.7.2

Any expert can point out what’s not incompatible?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>


$(document).ready(function() {
    //it works in jquery 1.5.2, but not 1.7.2
    $('img.tip').tooltip();
});


<img class="tip" data-tipHeader="Easy" data-tipBody="Very easy." src="a.gif" />


(function($) {
    $.fn.tooltip = function(options) {                  
        this.each(function() {
            var $this = $(this);

            var tipHeader = $this.data('tipHeader');
            var tipBody = $this.data('tipBody');

                $this.hover(function(e) {

Answer 1

Based on my research don’t use uppercase character in html data-* attribute name.

Working DEMO