Switching my application from Handlebars + Semantic UI to Vue3 + Vuetify has presented a challenge as I encounter differences in implementation.
Previously, I utilized the data-tooltip attributes extensively in Semantic UI which seamlessly upgraded them to elegant tooltips without any additional markup.
In order to cater to both regular and pro users, I incorporated a feature to "disable tooltips" by introducing a data-app-tooltip attribute which controlled the display based on user preferences. This transformation was achieved through a simple JQuery function that modified the app-specific tooltip attributes to standard ones upon page load.
However, with the Vuetify tooltip component requiring additional markup associated with triggering components, I am faced with the task of replicating my previous transformation process for seamless integration.
Previously, in Semantic UI, this transformation took place within the page-load template:
$(document).ready(function () {
// Disable tooltips based on user configuration.
if(confTooltips){
// Convert placeholders to actual tooltips
$("[data-app-tooltip]").each(function(i,el){
var $el = $(el);
$el.attr('data-tooltip', $el.attr('data-app-tooltip'));
});
}
})
An example interface with an optional tooltip looked like:
<a href="/app/mode/full"
class="ui mini basic icon item"
data-app-tooltip="Show the full navigation controls"
>
<i class="icon angle right"></i>
</a>
Now, my goal is to have a global Vue transform that converts elements with the data-app-tooltip attribute into components with proper structure according to Vuetify's tooltip component.
For instance, transforming an item like this:
<span v-bind="props" data-app-tooltip="The number of items imported from this file">
{{ item.count }}
</span>
To something similar to:
<v-tooltip text="The number of items imported from this file">
<template v-slot:activator="{ props }">
<span v-bind="props">
{{ item.count }}
</span>
</template>
</v-tooltip>
The exact implementation details might vary depending on the simplicity of the preferred Vuetify tooltip, considering the complexity of the documentation available.
This also raises a more general question: how can Vue templates be transformed into a different format before being instantiated by the framework?