Currently, I'm tackling a project with Vuejs and Laravel.
There's a tooltip directive incorporated that relies on Bootstrap's functionality.
Check it out below:
window.Vue.directive("tooltip", function(el, binding) {
// console.log(el, binding);
window.$(el).tooltip({
title: binding.value,
placement: binding.arg ? binding.arg : "right",
trigger: "hover",
html: true
});
});
To use it:
<div
v-tooltip="messages.type_button"
class="form-group row border-bottom p-2"
>
Where you define the messages object as follows:
message:{
type_button:'Hello World, this is tooltip'
}
Although the tooltip functions well on desktops, it presents display issues on mobile devices. Therefore, the decision is to hide the tooltip on mobile.
Given the absence of any identified package, it seems likely that this is a custom directive created specifically for this project.
We attempted using media queries to hide the tooltip on mobile but encountered no success. Any suggestions on how to approach this issue would be greatly appreciated.