Streaming live at 10am (PST)

Change An Element's Text On Hover (without interactions)


#1

Demo:

See it in action here: https://samliew.com/services

Description:

Since this is not possible via interactions (other than setting up an interaction toggle to hide the top element of two different elements “absolute” positioned on top of each other), we are going to use a small piece of reusable code that will enable this functionality on any element(s) on your site. This piece of code will also “save” the original button/element’s width and height, so that the button doesn’t resize if the length of text is different!

Step 1:

Paste this in Site Settings > Custom Code > Footer Code. Save changes.

<script>
Webflow.push(function() {
  
  // Hover text change
  $('[data-hover-text]').hover(function() {
    var el = $(this); el.attr('data-hover-original', el.text()).css({ 'width': el.outerWidth()+'px', 'height': el.outerHeight()+'px' }).text(el.attr('data-hover-text'));
  }, function() {
    var el = $(this); el.css({ 'width': '', 'height': '' }).text(el.attr('data-hover-original'));
  });
});
</script>

Step 2:

For each element/button/whatever you want this on, add a custom property Name data-hover-text with the Value to be the hover text.

Step 3:

As simple as that. Publish and enjoy.


Caveats:

  • The code above only replaces TEXT. If you want to replace more complex content like HTML content like nested divs, etc, you might be better off using interactions.

  • You can’t replace custom attributes on elements from the Editor, and you need to change this from the Designer view.

  • This piece of code will try to “save” the original button/element’s width and height, so that the button doesn’t resize if the length of text is different! If you don’t want the size fixed, use the code below instead

Code
<script>
Webflow.push(function() {
  
  // Hover text change
  $('[data-hover-text]').hover(function() {
    $(this).attr('data-hover-original', $(this).text()).text($(this).attr('data-hover-text'));
  }, function() {
    $(this).text(el.attr('data-hover-original'));
  });
});
</script>

See also:

Change An Image's Image On Hover (without interactions)

Also, feel free to contact me for further code help and/or customization of third-party plugins


Change An Image's Image On Hover (without interactions)
Changing button's text on hover
Change button text on hover script
#2

Woah! I definitely will be referencing this for later!

Thank you @samliew!

Best,

Nathan