title: How to hide bootstrap directive tooltip in vuejs for mobile devices?
body: <p>I am working on Vuejs + Laravel.</p>
  <p>There is one tooltip directive which uses bootstrap's functionality.</p>
  <p>Here it is:</p>
  <pre><code>window.Vue.directive(&quot;tooltip&quot;, function(el, binding) {
    // console.log(el, binding);
  
    window.$(el).tooltip({
      title: binding.value,
      placement: binding.arg ? binding.arg : &quot;right&quot;,
      trigger: &quot;hover&quot;,
      html: true
    });
  });
  
  </code></pre>
  <p>and its usage is like this:</p>
  <pre><code>&lt;div
              v-tooltip=&quot;messages.type_button&quot;
              class=&quot;form-group row border-bottom p-2&quot;
            &gt;
  </code></pre>
  <p>where</p>
  <pre><code>message:{
  type_button:'Hello World, this is tooltip'
  }
  </code></pre>
  <p>So this tooltip is working great in desktops but it is causing display issue in mobile device hence we need to hide this tooltip altogether in mobile devices.</p>
  <p>Since I have not found any package it uses, so guessing it is a custom directive developed.</p>
  <p>We tried hiding using media queries but no help. Can anyone have idea, what should I do ?</p>