Info Tooltip

<div style="padding: var(--size-4);">
    <h1 class="mexican-pink">Tooltip</h1>
    <h3 class="celestial-blue">Inline Tooltip</h3>
    <div style="padding: var(--size-4);">
        <article>
            <p class="first-graph">
                Lorem ipsum dolor sit amet,
                <span class="tooltip" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipisicing elit">consectetur adipisicing</span>
                elit, <span class="tooltip malachite" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipisicing elit">sed do eiusmod</span>. Dolor sit amet,
                consectetur adipisicing elit,
                sed do eiusmod.
            </p>
            <p>
                Does it <span class="tooltip selective-yellow" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipisicing elit">really</span> matter that your
                information isn’t <span class="tooltip celestial-blue" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipisicing elit">actually</span>
                anonymous? Location data companies argue that your data is safe — that it poses no real risk
                because it’s stored on <span class="tooltip mexican-pink" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipisicing elit">guarded</span>
                servers. This assurance has been undermined by the parade of publicly reported data breaches — to say nothing of breaches
                that don’t make <span class="tooltip chartreuse" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipisicing elit">headlines</span>. In truth,
                sensitive information can be easily transferred or leaked, as evidenced by this very story.
            </p>
        </article>
    </div>
    <h3 class="celestial-blue">Tooltip Button</h3>
    <div style="padding: var(--size-4);">
        <article>
            <p class="first-graph">
                We’re constantly shedding data, for example, by surfing the internet or making credit card purchases. But location data is different. Our precise
                locations are used fleetingly in the moment for a targeted ad or notification, but then repurposed indefinitely for much more profitable ends, like
                tying your purchases to billboard ads you drove past on the freeway. Many apps that use your location, like weather services, work perfectly well
                without your precise location — but collecting your location feeds a lucrative secondary business of analyzing, licensing and transferring that
                information to third parties.
                <span class="tooltip button" data-tooltip="but collecting your location feeds a lucrative secondary business of analyzing"></span>
            </p>
            <p>
                For many Americans, the only real risk they face from having their information exposed would be embarrassment or inconvenience. But for others, like
                survivors of abuse, the risks could be substantial. And who can say what practices or relationships any given individual might want to keep private, to
                withhold from friends, family, employers or the government? We found hundreds of pings in mosques and churches, abortion clinics, queer spaces and other
                sensitive areas.
                <span class="tooltip button malachite" data-tooltip="but collecting your location feeds a lucrative secondary business of analyzing">
                </span>
            </p>
            <p>
                In one case, we observed a change in the regular movements of a Microsoft engineer. He made a visit one Tuesday afternoon to the main Seattle campus of
                a Microsoft competitor, Amazon. The following month, he started a new job at Amazon. It took minutes to identify him as Ben Broili, a manager now for
                Amazon Prime Air, a drone delivery service.
                <span class="tooltip button selective-yellow info" data-tooltip="but collecting your location feeds a lucrative secondary business of analyzing">
                </span>
            </p>
            <p>
                “I can’t say I’m surprised,” Mr. Broili told us in early December. “But knowing that you all can get ahold of it and comb through and place me to see
                where I work and live — that’s weird.” That we could so easily discern that Mr. Broili was out on a job interview raises some obvious questions, like:
                Could the internal location surveillance of executives and employees become standard corporate practice?
                <span class="tooltip button celestial-blue square" data-tooltip="but collecting your location feeds a lucrative secondary business of analyzing">
                </span>
            </p>
            <p>
                Mr. Broili wasn’t worried about apps cataloguing his every move, but he said he felt unsure about whether the tradeoff between the services offered by
                the apps and the sacrifice of privacy was worth it. “It’s an awful lot of data,” he said. “And I really still don’t understand how it’s being used. I’d
                have to see how the other companies were weaponizing or monetizing it to make that call.”
                <span class="tooltip button mexican-pink info square" data-tooltip="but collecting your location feeds a lucrative secondary business of analyzing">
                </span>
            </p>
            <p>
                If this kind of location data makes it easy to keep tabs on employees, it makes it just as simple to stalk celebrities. Their private conduct — even in
                the dead of night, in residences and far from paparazzi — could come under even closer scrutiny.
                <span class="tooltip button chartreuse size-1" data-tooltip="but collecting your location feeds a lucrative secondary business of analyzing">
                </span>
            </p>
        </article>
    </div>
    <h3 class="celestial-blue">Button with Embedded Tooltip Button</h3>
    <div style="padding: var(--size-4);">
        <button type="button" class="malachite">
            Embedded Tooltip Button
            <span class="tooltip button" data-tooltip="but collecting your location feeds a lucrative secondary business of analyzing">
            </span>
        </button>
    </div>
</div>