search

atomiks / tippyjs

Tooltip, popover, dropdown, and menu library
https://atomiks.github.io/tippyjs/
MIT License
12.03k stars 520 forks source link

How can I trigger a tooltip by hovering over or clicking on a word (instead of a button)? #877

Closed synth-pop closed 3 years ago

synth-pop commented 3 years ago

I love tippy.js, but I'm trying to figure out how I can trigger a tooltip by hovering over or clicking on a word. Is this possible? Also, is it possible to trigger a tooltip when hovering over an image (like what you're doing with the Render and Plug-in icons on this page: https://atomiks.github.io/tippyjs/v6/all-props/)?

Ezra-Siton-UIX commented 3 years ago

The short answer is yes. But you should wrap this "word" with span (or another HTML element like strong -or- b). Only change the selector.

<html>
  <head>
    <title>Tippy</title>
  </head>
  <body>
    <p>Hello World <span>tooltip</span></p>

    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="https://unpkg.com/tippy.js@6"></script>
    <script>
      // With the above scripts loaded, you can call `tippy()` with a CSS
      // selector and a `content` prop:
      tippy('p span', {
        content: 'My tooltip!',
      });
    </script>
  </body>
</html>