Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
jQuery - Hover Content Change
<button class="btn btn-primary" data-hover-content="Goodbye world">
Hello world
</button>
<button class="btn btn-primary" data-hover-element="#elementContent">
Button Content
</button>
<div id="elementContent" style="display:none;">
Element Content
</div>
/*
|--------------------------------------------------------------------------
| jQuery - Hover Content Change
|--------------------------------------------------------------------------
|
| Simple jQuery script to change the inner content of an element in the
| DOM to an attribute or other element's value.
|
*/
$('[data-hover-content], [data-hover-element]').on('mouseover', function() {
$(this).attr('data-original-content', $(this).html());
if ($(this).attr('data-hover-content')) {
$(this).html($(this).attr('data-hover-content'));
} else if ($(this).attr('data-hover-element')) {
var selector = $(this).attr('data-hover-element');
var content = $(selector).html();
$(this).html(content);
}
}).on('mouseleave', function() {
if ($(this).attr('data-original-content')) {
$(this).html($(this).attr('data-original-content'));
$(this).removeAttr('data-original-content');
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.