Change text on hover, then return to the previous text

I would use a combination of jQuery .hover() and jQuery .data():

http://jsfiddle.net/5W4Bd/

HTML:

<div id="myDiv">default text</div>

javascript:

$('#myDiv')
    .data('textToggle', 5)
    .hover(function (e) {
        var that = $(this);

        // get the text from data attribute
        var textToSet = that.data('textToggle');

        // save the current text so it can be reverted
        that.data('textToggle', that.text());

        // set the new text
        that.text(textToSet);
    }, function (e) {
        var that = $(this);

        // get the text from data attribute
        var textToSet = that.data('textToggle');

        // save the current text so it can be reverted
        that.data('textToggle', that.text());

        // set the new text
        that.text(textToSet);
    });

edit: feel free to refactor the anonymous function used as the two callbacks to hover, since they are exactly the same :)

Yes, you can use CSS content. To switch between the normal text and "Reply!", put the normal text in a span and hide that when hovering.

button {
  width: 6em
}

button:hover span {
  display: none
}

button:hover:before {
  content: "Reply!"
}

<button><span>3 replies</span></button>

Edit: this works in IE8, but not in its compatibility mode, so I assume IE7 is out. Would that be a problem?

I think this would be a straightforward way to go for it. Use two span inside your button, one with content 'x replies', one with content 'Reply!'. Using CSS and :hover, you just switch which span is shown on hover.

button .comment {
  display: none;
}

button:hover .replies {
  display: none;
}

button:hover .comment {
  display: inline;
}

<button>
    <span class="replies">5 Replies</span>
    <span class="comment">Reply!</span>
</button>

This works just fine in about everything, as it uses very basic things to achieve an equally basic goal.

$('#button_id').hover(
    function(){
        $(this).text('Reply!');
    },
    function(){
        $.ajax({
            url: 'script.php',
            type: 'post',
            data: comment_id,
            success: function(num_replies){
                $('#button_id').text(num_replies + ' replies');
            }
        });
    }
);

I think you could use this kind of function, when you stop hovering, you feed the ajax call your comment id, and it returns the # of replies for that comment. You can decide how you want to store/retrieve your comment ID.