<div id="mainContainer">
        <div id="tooltipContainer"></div>
        <div class="sectionContainer">
            <p>Try <i>highlighting</i> some text below</p>
            <div id="textContainer">
                <p id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus congue condimentum ante
                    laoreet tempus.
                    Phasellus semper vitae turpis et luctus. Quisque viverra ligula quis iaculis luctus. Vivamus et nibh
                    eu
                    justo bibendum placerat. Nullam auctor fringilla risus, a eleifend purus pharetra et. Cras varius
                    arcu
                    non felis egestas, quis mollis sem ultricies. Vestibulum congue mattis sem. Suspendisse ut dui in
                    ligula
                    faucibus feugiat id suscipit risus. Donec lobortis ligula ac dictum tincidunt. Quisque lacus metus,
                    porta eu lobortis ultricies, aliquet ac mi. Maecenas lobortis mollis diam, sagittis pulvinar urna
                    mollis
                    a. Phasellus quis nibh felis. Cras porta pharetra interdum. Nam sodales purus vitae malesuada
                    sollicitudin.</p>
            </div>
        </div>
    </div>
    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="https://unpkg.com/tippy.js@6"></script>
    <script src="index.js"></script>

body {
    display: grid;
  height: 100vh;
    place-items: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#mainContainer {
    width: 75vw;
}

div {
    display: grid;
    place-items: center;
}

#textContainer {
    padding: 24px;
    border-radius: 4px;
    display: grid;
    place-items: center;
    background-color: #abcbca;
}

#textContainer>p {
    color: white;
    letter-spacing: 2px;
    font-size: 16px;
}

p::selection {
    background-color: gainsboro;
    color: black;
}

#tooltipContainer {
    position: absolute;
}

const [instance] = tippy('#tooltipContainer', {
    content: 'tooltip',
    sticky: true
})

const tooltipContainer = document.getElementById("tooltipContainer");
        
document.getElementById("textContainer").addEventListener("mouseup", () => {
    let selection = document.getSelection();
    if (!selection.isCollapsed) {
        const { left, top, width, height } = selection.getRangeAt(0).getBoundingClientRect()
    
        tooltipContainer.style.left = `${left}px`
        tooltipContainer.style.top = `${top}px`
        tooltipContainer.style.width = `${width}px`
        tooltipContainer.style.height = `${height}px`

        console.log("showing")
        const numLines = selection.toString().length;
        instance.setContent(`Great Job! You selected ${numLines} charcters!`);
        instance.enable()
    }
});

document.addEventListener('mousedown', (event) => {
    console.log("hiding")
    tooltipContainer.style.width = `${0}px`
    tooltipContainer.style.height = `${0}px`
    instance.disable()
})