What is the best way to conceal a bootstrap directive tooltip in Vue.js for mobile users?

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.

Answer №1

After much searching, I finally came across the solution thanks to Umezo's insightful comment

Here is the code snippet that did the trick:

window.Vue.directive("tooltip", function(el, binding) {
  // console.log(el, binding);

    if (window.matchMedia("(min-width: 300px)").matches) {

        window.$(el).tooltip({
            title: binding.value,
            placement: binding.arg ? binding.arg : "right",
            trigger: "hover",
            html: true
        });
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the preferred method for accessing nested object properties in React props?

Building upon a previous inquiry - Javascript - How do I access properties of objects nested within other Objects It appears that standard dot notation doesn't suffice for accessing nested object properties within React state/props. In the case of t ...

Is there a way to access the content of a drop-down menu in JavaScript besides using ".value"?

Trying to create a table with rows that change dynamically but columns that are fixed. There's a drop-down menu whose content is based on an xml file. When I use .value to access the current content of my drop-down menu, it works fine in Firefox but n ...

Using a loop to chain jQuery's .when().then() method and ensuring a fixed final call at the end of the

The solution that closely matches my issue can be found at One common use case for .then is chaining ajax requests: $.ajax({...}).then(function(){ return $.ajax({...}); }).then(function(){ return $.ajax({...}); }).then(function(){ retu ...

Exploring the possibilities: Utilizing HTML5, File API, and jQuery to

I have a form displayed in a dialog and it includes a "submit" button which, when clicked, utilizes jQuery to send the form data to the server via AJAX. However, I encountered an issue where the uploaded file was always null. After researching on Google, I ...

Create a submit button using Vue.js for text input

Can anyone help with a beginner question? I have a form that includes a text field. When I type something in and press enter, no result shows up. However, when I type something in and click the button, I get the desired result. Could someone guide me on ...

Can the z-index of a div be altered by a checked checkbox?

I've been trying to figure out how to make a PayPal button only clickable after the user confirms the Terms of Service. My idea is to place another div over the PayPal button with an unchecked checkbox, opacity, and z-index. When the user checks the c ...

The validation did not pass using the validate.min.js script

Hey everyone, I had this code working perfectly before but now it seems to have stopped working. Can anyone help me figure out what's going on? Below is the form I am referring to: <form action="CreateUser" method="POST" id="subscribe"> & ...

Having trouble with button styling, unsure how to fix it

As someone who is new to learning, I am currently struggling with styling a button on my website. No matter what I try, it remains a white rectangle with just a border and some text. I have included the code for reference. Any help or advice would be great ...

Angular JS - A guide to implementing ng-model binding at a later stage

In a large codebase, there is a straightforward scenario that I need help with: There is an Angular APP and Controller already set up and functioning correctly. However, a ng-model element needs to be dynamically created at a later stage (perhaps through ...

What is the best way to include a new array at the beginning of a lexicographically sorted array?

After lexicographically sorting an array, I am trying to figure out how to add values from another array "cityOfTheMoscow" first and then maintain the lexigraphical order. However, while using the code snippet below: result.unshift(...self.cityOfTheMoscow ...

Encountered JSON array, unable to retrieve certain attributes in AngularJS

I have developed a web service that organizes my information into a list and then converts it to JSON format. Below is the JSON output: { GetEventLTResult: [ { eventID: 1, location: "Place A", type: "Communi ...

jQuery AJAX in ASP.NET MVC

I am developing a website that displays comments on each user's page and allows other users to add comments. My goal is to have the comment form visible on the same page, so when a user adds a comment, it gets saved in the database and appears instant ...

Modify the chosen dates in the date range picker tool designed for Twitter Bootstrap

I recently started using the date range picker for Twitter Bootstrap, a creation by Dan Grossman, which you can find here. Upon initialization, I realized that setting pre-defined values like startDate and endDate was possible. However, my question is: Is ...

Does the modularization of code impact the performance of the react-app?

The client provided me with a React app that includes an index.jsx file where 90% of the coding has been completed. To prevent getting stuck in Scroll Limbo, I have started breaking down the code into modules for each specific requirement. These include ...

Trigger an event upon completion of the angular $route.reload() function

I am encountering an issue where I need to refresh the route using the following code: $route.reload(); However, I also need to trigger a function just before the template is rendered again. For instance: $("#someTab").click(); Your help would be grea ...

What is the best way to show checkbox selections based on my database structure?

Two variables, one for checkboxes and the other for checked values are causing an issue in displaying them from controller to view. The code to handle this in the controller is as follows: $scope.infoParticipant = functionThatGetsParticipants(); ...

What's the best way to align grid items that are positioned next to each other in CSS Grid?

I'm having trouble aligning two grid elements next to each other. What I want is for the heading, paragraph, and bottom links to be in one grid element and the image to be in another. When I tried using grid-template-columns: 1fr 2fr;, one element got ...

Error encountered in jQueryUI Autocomplete: the function 'this.source' is not defined

I have been working on incorporating a live search feature that scans through keys in a JSON obtained from a public API. To achieve this, I am utilizing Jquery UI. However, I encountered the following error and I am uncertain about how to resolve it. Un ...

Removing a function when changing screen size, specifically for responsive menus

$(document).ready(function () { // retrieve the width of the screen var screenWidth = 0; $(window).resize(function () { screenWidth = $(document).width(); // if the document's width is less than 768 pixels ...

Using a React component to import a module for publishing on NPM

Creating my first React component for NPM publication has been quite the learning experience. I decided to use the react-webpack-component package from Yeoman to kickstart my project. However, upon installing and importing my component into a React app, I ...