How to allow tooltip in Desktop view but not in mobile view? #1061

ghost · 2022-06-12T02:36:17Z

ghost
Jun 12, 2022

Hi all, I am trying to build my first portfolio website and am trying to integrate tippy.js into it. Below is an extract of what I've currently built (not complete yet).

I've noticed in Desktop, it's working as I intended. But in mobile, the tooltips are appearing. Is there a way to disable this functionality without writing my own javascript code to override the existing behaviour in mobile?

Hope someone can help as I'm new to using this library. Thanks!

<html>
  <head>
    <title>My website</title>
    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="https://unpkg.com/tippy.js@6"></script>
  </head>
  <body>
    <nav id="myNavigationBar">
          <ul>
             <li><a href="default.html" id="list-item-one">Home</a></li>
             <li><a href="about.html" id="list-item-two">About</a></li>
             <li><a href="contact.html" id="list-item-three">Contact</a></li>
          </ul>
    </nav>
    <script>
      // With the above scripts loaded, you can call `tippy()` with a CSS
      // selector and a `content` prop:
      tippy('#list-item-one', {
        content: 'Welcome to my homepage',
      });

       tippy('#list-item-two', {
        content: 'Important information about me',
      });

       tippy('#list-item-three', {
        content: 'How to contact me?',
      });
    </script>
  </body>
</html
```>

Answered by melvincwng

Jun 12, 2022

Hi @Edilo-Stevens, to disable tooltip in mobile view, simply do:

tippy('#list-item-one', {
        content: 'Welcome to my homepage',
        touch: false,
});

Reference: https://atomiks.github.io/tippyjs/v6/all-props/#touch

View full answer

melvincwng · 2022-06-12T02:42:21Z

melvincwng
Jun 12, 2022

Hi @Edilo-Stevens, to disable tooltip in mobile view, simply do:

tippy('#list-item-one', {
        content: 'Welcome to my homepage',
        touch: false,
});

Reference: https://atomiks.github.io/tippyjs/v6/all-props/#touch

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to allow tooltip in Desktop view but not in mobile view? #1061

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

How to allow tooltip in Desktop view but not in mobile view? #1061

ghost Jun 12, 2022

Replies: 1 comment

melvincwng Jun 12, 2022

ghost
Jun 12, 2022

melvincwng
Jun 12, 2022