We've made some great progress on our tooltip plugin so far, but things aren't quite ready for primetime yet. The biggest issue right now is that our tooltip isn't reactive. view and bound it to a reactive ref. Now let's use that reactive ref as the value of our tooltip text.
When I hover over our tooltip now, it does have the correct text shown. But if I were to change the value of the input, things would not work so well. Yeah, unfortunately, the tooltip has remained unchanged. view, we need to not only initialize tippy whenever the component is mounted, but also whenever the component is updated.
All right, let's try things out now. I'll give the preview a refresh, hover over the text, And we are still starting out correctly. Now let's update the input. And this time the text does display properly in the tooltip.
But you'll notice the tooltip had this weird kind of effect to it. Let's see it one more time. Do you see that? What's happened here is that we've got a new tooltip element every single time we made a change in the input.
So for every single letter of our word changed, we have a tooltip. We need to ensure there's only ever a single tooltip at a time. destroy method on it. That would look something like this.
First, I'll create a variable to hold our tippy instance and just initialize it to null. It's important that it find the variable outside of the scope of the callback function. That way it's the same instance every single time it's called. Then I'll assign the result of the tippy function to this tippy instance.
Before we initialize a new tippy instance, I'll check if one exists already, and if it does, we'll call the destroy method on it. Finally, so that I don't have to do the same thing inside of onUpdated, I'll extract our callback function here into a named function, and then just run that both onMounted and onUpdated. I've decided to call this initTippy, just as a shorthand to say this is how we're going to initialize tippy and then i'll add it to on updated as well all right let's see if that's any better perfect this time we only have a single tooltip and it's reactive just like you'd expect awesome We've made some great progress on our tooltip plugin so far, but things aren't quite ready for primetime yet. The biggest issue right now is that our tooltip isn't reactive.
view and bound it to a reactive ref. Now let's use that reactive ref as the value of our tooltip text. When I hover over our tooltip now, it does have the correct text shown. But if I were to change the value of the input, things would not work so well.
Yeah, unfortunately, the tooltip has remained unchanged. view, we need to not only initialize tippy whenever the component is mounted, but also whenever the component is updated. All right, let's try things out now. I'll give the preview a refresh, hover over the text, And we are still starting out correctly.
Now let's update the input. And this time the text does display properly in the tooltip. But you'll notice the tooltip had this weird kind of effect to it. Let's see it one more time.
Do you see that? What's happened here is that we've got a new tooltip element every single time we made a change in the input. So for every single letter of our word changed, we have a tooltip. We need to ensure there's only ever a single tooltip at a time.
destroy method on it. That would look something like this. First, I'll create a variable to hold our tippy instance and just initialize it to null. It's important that it find the variable outside of the scope of the callback function.
That way it's the same instance every single time it's called. Then I'll assign the result of the tippy function to this tippy instance. Before we initialize a new tippy instance, I'll check if one exists already, and if it does, we'll call the destroy method on it. Finally, so that I don't have to do the same thing inside of onUpdated, I'll extract our callback function here into a named function, and then just run that both onMounted and onUpdated.
I've decided to call this initTippy, just as a shorthand to say this is how we're going to initialize tippy and then i'll add it to on updated as well all right let's see if that's any better perfect this time we only have a single tooltip and it's reactive just like you'd expect awesome