NextJs Tooltip with @tippyjs/react

Question

<Link href="/company/add" >
  <a title="My New Title" data-toggle='tooltip' className="btn btn-primary">My Link</a>
</Link>

A typical Nextjs Link about works while and adding Tippy Component looks as simple as show below but this dosent work.

<Tippy content="My Tooltip">
  <Link href="/company/add" >
    <a title="My New Title" data-toggle='tooltip' className="btn btn-primary">My Link</a>
  </Link>
</Tippy>

If anyone has done this successfully I will appreciate your help. I don't if there is about other tooltip that works easily with NextJs

Answer 1

This works:

<Tippy content="hi">
    <div>
       <Link href="/">
          <a>
            Home Page
          </a>
       </Link>
    </div>
</Tippy>

Even MaterialUIs Tooltip works the same way.

Answer 2

Try this it's working for me.

<Link href="/company/add" >
<Tippy content="My Tooltip">
 <a title="My New Title" data-toggle='tooltip' className="btn btn-primary">My Link</a>
</Tippy>
</Link>