is there a way to change the text displayed on hover?

It is possible, as long as it fits your needs:

h1 {
  position: relative;
}

h1:hover:after {
  content: attr(data-hover);
  position: absolute;
  top: 0;
  left: 0;
  background: white;
}

<h1 data-hover="another text">some text</h1>

There is the example of how you could achieve this with JavaScript:

function changeText(element) {
  element.innerHTML = "Changed!";
}

 <h1 onmouseover="changeText(this)">Hover me!</h1>

Eventually, you could add a onmouseout to set the text to it's before value.

I think it can be achieved in pure CSS using pseudo elements, as for JavaScript, you could do something like this:

<h1>Original text</h1>

<script>

    const h1 = document.querySelector('h1');


    h1.onmouseover = function () {
        h1.innerHTML = 'Hover text';
    };

    h1.onmouseout = function () {
        h1.innerHTML = 'Original text';
    };
</script>

You might need to use a different selector depending on your page contents, e.g.

<h1 class="title">Original text</h1>

const h1 = document.querySelector('h1.title');

This could be improved so that the same text isn't hardcoded in the HTML and the JS by using a data attribute.