Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Question about nested tooltips

See original GitHub issue

I have tried creating a nested tooltip, but the nested one does not display. I would appreciate any help.

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='UTF-8'/>
        <title>Tippy Playground</title>
        <style>
            html,body {font-family:Roboto,sans-serif;font-size:1em;}
            tt {color:royalBlue;font-size:1.4em;}
            button {margin:.5em;padding:.5em;}
            #box {align-items:flex-start;display:flex;flex-wrap:wrap;justify-content:center;}
            .gap {width:2em;}
            .help {cursor:help;}
            .hide {display:none;}
            .nested {border-bottom:2px dotted #333;}

            .tippy-tooltip.hs-theme {background-color: #ffecb3;border: .1em solid #ef5350;border-radius: 1em;color: #333;}
            .tippy-tooltip.hs-theme[data-animatefill] {background-color:transparent;}
            .tippy-tooltip.hs-theme .tippy-backdrop {background-color:#ffecb3;}
            .tippy-tooltip.hs-theme[x-placement^='top'] .tippy-arrow {border-top-color:#ef5350;margin-bottom:-.15em;}
            .tippy-tooltip.hs-theme[x-placement^='bottom'] .tippy-arrow {border-bottom-color:#ef5350;margin-top:-.15em;}
            .tippy-tooltip.hs-theme[x-placement^='left'] .tippy-arrow {border-left-color:#ef5350;margin-right:-.15em;}
            .tippy-tooltip.hs-theme[x-placement^='right'] .tippy-arrow {border-right-color:#ef5350;margin-left:-.15em;}
        </style>
    </head>
<body>
    <h3>This is a simple test for Tippy.js tooltips</h3>
    <div id='box'>
        <button class='t1 help'>Tooltip #1</button>
        <button class='t1 help'>Tooltip #1</button>
        <span class='gap'></span>
        <button class='t2 help'>Tooltip #2</button>
        <button class='t2 help'>Tooltip #2</button>
        <span class='gap'></span>
        <a href="#" class="myTip3 help">Nested</a>
    </box>

    <div class='hide'>
        <main id='myTip1'>
            A simple tooltip that contains very basic HTML, but is long enough to cause a line wrap - <tt>something special here</tt>.
        </main>
        <main id='myTip2'>
            This is tip #2.
        </main>
        <div id="myTip3">
            This is a regular tooltip, but with the addition of a <span class='nested help'>nested</span> tooltip.
        </div>
        <div id="myTip3-nested">
            This is a nested tooltip.
        </div>
    </div>

    <script src="https://unpkg.com/popper.js@1"></script>
    <script src="https://unpkg.com/tippy.js@4"></script>
    <script>
        tippy.setDefaults({
            allowHTML: true,
            animation: 'scale',
            arrow: false,
            delay: [100, 300],
            flip: true,
            flipBehavior: ['bottom', 'top'],
            interactive: true,
            maxWidth: '30em',
            multiple: true,
            placement: 'bottom-end',
            theme: 'hs',
        });
        tippy.group(
            tippy('.t1', {
                content: document.querySelector('#myTip1').innerHTML,
                placement: 'bottom-start',
            })
        );
        tippy('.t2', {
            content: document.querySelector('#myTip2').innerHTML,
        });
        tippy('.myTip3', {
            arrow: true,
            content: document.querySelector('#myTip3').innerHTML,
        });
        tippy('.myTip3 .nested', {
            arrow: true,
            content: document.querySelector('#myTip3-nested').innerHTML,
        });
    </script>
</body>
</html>

Issue Analytics

State:
Created 4 years ago
Comments:14 (5 by maintainers)

Top GitHub Comments

1reaction

chris-baytekcommented, Jan 20, 2020

Hey atomik. Is this still the way to nest? I’m looking to create a simple dropdown and the nested items are not showing up using data-template=“”, I have not tryed the above yet as I thought nesting was already included.

0reactions

git765commented, Feb 20, 2020

This is the repo for the React wrapper not the vanilla lib

Anyway, I’m not really sure what your code is supposed to be doing, but you the inner elements need to be part of a content element for the main parent tippy.
const content = document.createElement('div')

// 3 inner buttons with their own tippy
for (let i = 0; i < 3; i++) {
  const button = document.createElement('button')
  button.textContent = 'Text'
  content.appendChild(button)

  tippy(button, {
    content: "I'm a Tippy tooltip!",
  })
}

tippy('.myTip3', {
  content,
})
Extra logic is required to handle an edge case related to the parent tippy hiding which causes the child tippy to become disjointed from its reference element if it was also showing… I’m going to document it soon

This does work with version 4 but does not work on the last version (5). Do you have a solution for the new version?