Question

I have these data-attributes

<li data-audio="" data-pic="images/one.png" data-word="one" data-hint="What?"></li>

I pull them through using this function

$(wordsData).each(function () {
    var elm = $(this);
    listOfWords.push({
        "name": elm.data("word"),
        "pic": elm.data("pic"),
        "hint": elm.data("hint"),
        "audio": elm.data("audio")
    });
});

My problem is that when I pull the picture through I would like to display the hint in the same div. But for some reason when I check in the console it says value=””, when it should say “What?”

<div class="hint-img-wrapper">
<img src="" value="" id="hintPic" class="pic-hint" alt="Hint" />

I display it it like this

 $("#hintPic").attr('src', listOfWords[rndWord].pic).attr('value', listOfWords[rndWord].hint);
        $(hintPic).show();

Can someone tell me what I am doing wrong?

Answer 1

What you really want to set instead of .attr('value', listOfWords[rndWord].hint); is .attr('title', listOfWords[rndWord].hint);

The title property is what’s normally displayed if you hover over an image. If no title is specified it will use the alt property.