Change button_label on Shopify when hover

I think I have a solution for you.

You need to add a data attribute containing the wanted ‘hover text’, as you suggested yourself. Heres how I did it:

<a href="{{ block.settings.button_link }}" class="btn--full" >
  <div class="flex-btn">
    <span data-hover_text="Second placeholder text">
      {{ block.settings.button_label }}
    </span>
    {% render  'icon-arrow-right' %}
  </div>
</a>

Notice that I put the text into a span. This is important because we don’t want to interfere with the icon-arrow-right.

Next up we need the jQuery. Here how I implemented it:

$(window).on('load', function(){
    $('.btn--full').on('mouseover mouseout', function(){
        flipText($('.flex-btn span'));
    });
});

function flipText(el) {
    // Get and store the current text present in element
    var currentText = $(el).text();
    
    // Get and store the placeholder text from the 'hover_text' data-attribute
    var placeholderText = $(el).data('hover_text');

    // Replace the current text with the placeholder text
    $(el).text(placeholderText);

    // Replace the data attribute 'hover_text' with the current text
    $(el).data('hover_text', currentText);
}

Hopefully that helps. I can elaborate on anything if you need it, so let me know if you do.