Hello, I am currently diving into the world of VueJS and eager to learn more about it.
I recently created a simple tooltip that should appear when clicked and disappear when clicked again. I managed to achieve this with basic beginner-friendly code for a single tooltip.
<div v-if="toolTipContent.length > 0" class="c-tooltip">
<a @click="(clicked) ? clicked = false : clicked = true" class="c-tooltip--link">
{{ $label('toolTipLink') }}
</a>
<div v-html="toolTipContent" v-if="clicked" class="c-tooltip--content"></div>
</div>
As I progress, I now want to implement multiple tooltips. Simply copying the existing code and making changes doesn't seem like an optimal solution.
So, I am experimenting with something like this:
<div v-if="toolTipContent.length > 0" class="c-tooltip">
<a @click="toggleEl" class="c-tooltip--link">
{{ $label('toolTipLink') }}
</a>
<div v-html="toolTipContent" v-show="clicked" class="c-tooltip--content"></div>
</div>
and in JS, I added the following method:
methods: {
toggleEl(e) {
e.target.nextSibling.classList.toggle("show");
}
},
However, I feel a bit stuck at this point. Although I can toggle a class on the next sibling element (as shown above), it feels like a jQuery approach in Vue. I believe there must be a more Vue-native way to handle this using the clicked value, but currently, all tooltips are either shown or hidden together. Additionally, I am using v-show but feel that v-if might be a better alternative. The challenge is that with v-if, I can't target the content since it's not part of the DOM.
I would appreciate any guidance on the recommended approach to tackle this issue effectively.