{% extends "templates/sink.nunjucks" %}
{% block body %}
    <h1 class="sink-page-header">Tooltips Sink</h1>
    <style>
        p .luci-tooltip__trigger {
            border-bottom: solid 1px hotpink;
        }

        .tooltip-sink-static-example p {
            margin: 0;
            padding: {{ luci_tokens.space.inset.xxl }};
            text-align: center;
        }
    </style>
    <p class="sink-page-font-reset">
        The pink underline on the tooltip text in the paragraph is just for illustration purposes on this sink page. It is NOT part of the component. Any element can trigger a tooltip.
    </p>
    <p class="sink-page-font-reset">
        The tooltip is absolutely positioned relative to its trigger. This removes a need for Javascript to calculate absolute positions every time the window is resized. At this time there is no edge-detection for tooltips. They will appear offscreen if the trigger is too close to the viewport edge.
    </p>
    {% set tooltip_content %}
        Tool tip text goes here and here and some text here and maybe just maybe here. <a href="http://google.com">Link to google</a>
    {% endset %}

    <h2 class="sink-page-header">Default Tooltip, top center</h2>
    <p class="sink-page-font-reset">
        This is a paragraph of text and {% call luci.tooltip(content=tooltip_content) %}this word{% endcall %} is the tooltip trigger.
    </p>
    <p class="sink-page-font-reset">
        This is a paragraph of text and {% call luci.tooltip(content="short") %}this word{% endcall %} is the tooltip trigger.
    </p>

    <h2 class="sink-page-header">Multiple Tooltips in paragraph</h2>
    <p class="sink-page-font-reset">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem soluta saepe, {% call luci.tooltip(content="This is the first tooltip") %}tooltip 1 trigger{% endcall %} aliquid corrupti deleniti consectetur est, quaerat impedit mollitia? Incidunt fugit, sequi corrupti. Exercitationem quas doloremque nihil at? Lorem ipsum dolor {% call luci.tooltip(content="This is the second tooltip") %}tooltip 2 trigger{% endcall %}sit amet, consectetur adipisicing elit. Dignissimos et saepe eum iste assumenda maiores quae magnam ad aliquam laudantium veniam aliquid incidunt omnis aspernatur, sapiente doloribus sint esse corporis.
    </p>

    <h2 class="sink-page-header">Button as trigger</h2>
    {% call luci.tooltip(content="This is a tooltip on a button", element="div") %}{{ luci.button() }}{% endcall %}

    <h2 class="sink-page-header">Text Input as trigger</h2>
    {% call luci.tooltip(content="This is a tooltip on a form input") %}{{ luci.form_input() }}{% endcall %}

    <h2 class="sink-page-header">Icon as trigger</h2>
    {% call luci.tooltip(content="This is a tooltip on an icon") %}{{ luci.icon(name="help") }}{% endcall %}

    <h2 class="sink-page-header">Icon as trigger, tooltip only appears on click</h2>
    <p class="sink-page-font-reset">
        Tooltips appear on hover AND on click (to support touch screens) by default. The modifier class <code>luci-tooltip--hidden-on-hover</code> removes the "appear on hover" behavior and only allows the tooltip to be shown on click. 
    </p>
    {% call luci.tooltip(class="luci-tooltip--hidden-on-hover", content="This is a tooltip on an icon") %}{{ luci.icon(name="help") }}{% endcall %}


    <h2 class="sink-page-header">Bottom Center</h2>
    <p class="sink-page-font-reset">
        This is a paragraph of text and {% call luci.tooltip(class="luci-tooltip--bottom-center", content=tooltip_content) %}this word{% endcall %} is the tooltip trigger.
    </p>
    <p class="sink-page-font-reset">
        This is a paragraph of text and {% call luci.tooltip(class="luci-tooltip--bottom-center", content="short") %}this word{% endcall %} is the tooltip trigger.
    </p>

    <h2 class="sink-page-header">Position Examples</h2>
    <p class="sink-page-font-reset">
        The tooltip has 12 different position modifier classes.
    </p>
    <style>
        .tooltip-sink-static-examples {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 60px;
        }

        .tooltip-sink-static-examples > * {
            box-sizing: border-box;
            width: 500px;
        }

        .tooltip-sink-static-examples--left-pad > * {
            padding-left: 300px;
        }

        .tooltip-sink-static-examples--right-pad > * {
            padding-right: 300px;
        }
    </style>
    <div class="tooltip-sink-static-examples">
        <div class="tooltip-sink-static-example">
            <p class="sink-page-font-reset">{% call luci.tooltip(class="luci-tooltip--visible", content="Top Center (Default)") %}top center{% endcall %}</p>
        </div>
        <div class="tooltip-sink-static-example">
            <p class="sink-page-font-reset">{% call luci.tooltip(class="luci-tooltip--visible luci-tooltip--top-left", content="Top Left") %}top left longer trigger to show tail position{% endcall %}</p>
        </div>
        <div class="tooltip-sink-static-example">
            <p class="sink-page-font-reset">{% call luci.tooltip(class="luci-tooltip--visible luci-tooltip--top-right", content="Top Right") %}top right longer trigger to show tail position{% endcall %}</p>
        </div>
    </div>

    <div class="tooltip-sink-static-examples">
        <div class="tooltip-sink-static-example">
            <p class="sink-page-font-reset">{% call luci.tooltip(class="luci-tooltip--visible luci-tooltip--bottom-center", content="Bottom Center") %}bottom center{% endcall %}</p>
        </div>
        <div class="tooltip-sink-static-example">
            <p class="sink-page-font-reset">{% call luci.tooltip(class="luci-tooltip--visible luci-tooltip--bottom-left", content="Bottom Left") %}bottom left{% endcall %}</p>
        </div>
        <div class="tooltip-sink-static-example">
            <p class="sink-page-font-reset">{% call luci.tooltip(class="luci-tooltip--visible luci-tooltip--bottom-right", content="Bottom Right") %}bottom right{% endcall %}</p>
        </div>
    </div>
    <div class="tooltip-sink-static-examples tooltip-sink-static-examples--left-pad">
        <div class="tooltip-sink-static-example">
            <p class="sink-page-font-reset">{% call luci.tooltip(class="luci-tooltip--visible luci-tooltip--left-top", content="Left Top Really long to make this wrap when it hits the max width") %}left top{% endcall %}</p>
        </div>
        <div class="tooltip-sink-static-example">
            <p class="sink-page-font-reset">{% call luci.tooltip(class="luci-tooltip--visible luci-tooltip--left-center", content="Left Center Really long to make this wrap when it hits the max width") %}left center{% endcall %}</p>
        </div>
        <div class="tooltip-sink-static-example">
            <p class="sink-page-font-reset">{% call luci.tooltip(class="luci-tooltip--visible luci-tooltip--left-bottom", content="Left Bottom Really long to make this wrap when it hits the max width") %}left bottom{% endcall %}</p>
        </div>
    </div>
    <div class="tooltip-sink-static-examples tooltip-sink-static-examples--right-pad">
        <div class="tooltip-sink-static-example">
            <p class="sink-page-font-reset">{% call luci.tooltip(class="luci-tooltip--visible luci-tooltip--right-top", content="Left Top Really long to make this wrap when it hits the max width") %}right top{% endcall %}</p>
        </div>
        <div class="tooltip-sink-static-example">
            <p class="sink-page-font-reset">{% call luci.tooltip(class="luci-tooltip--visible luci-tooltip--right-center", content="Left Center Really long to make this wrap when it hits the max width") %}right center{% endcall %}</p>
        </div>
        <div class="tooltip-sink-static-example">
            <p class="sink-page-font-reset">{% call luci.tooltip(class="luci-tooltip--visible luci-tooltip--right-bottom", content="Left Bottom Really long to make this wrap when it hits the max width") %}right bottom{% endcall %}</p>
        </div>
    </div>

    <h2 class="sink-page-header">Additional Static Examples</h2>
    <div class="tooltip-sink-static-example">
        <p class="sink-page-font-reset">{% call luci.tooltip(class="luci-tooltip--visible luci-tooltip--right-center", content="Right Center Really long to make this wrap when it hits the max width") %}right center{% endcall %}</p>
    </div>
    <div class="tooltip-sink-static-example">
        <p class="sink-page-font-reset">{% call luci.tooltip(class="luci-tooltip--visible luci-tooltip--left-center", content="Left Center") %}<span style="display:inline-block;">tall trigger to<br/>test vertical<br/>centering</span>{% endcall %}</p>
    </div>
    <div class="tooltip-sink-static-example">
        <p class="sink-page-font-reset">{% call luci.tooltip(class="luci-tooltip--visible luci-tooltip--right-center", content="Right Center") %}<span style="display:inline-block;">tall trigger to<br/>test vertical<br/>centering</span>{% endcall %}</p>
    </div>
    <div class="tooltip-sink-static-example">
        <p class="sink-page-font-reset">{% call luci.tooltip(class="luci-tooltip--visible luci-tooltip--right-top", content="a") %}<span style="display:inline-block;">a</span>{% endcall %}</p>
    </div>
    <div class="tooltip-sink-static-example">
        <p class="sink-page-font-reset">{% call luci.tooltip(class="luci-tooltip--visible luci-tooltip--bottom-right", content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos voluptate, doloremque non quaerat hic provident sequi, perspiciatis ratione sint nostrum aspernatur error, dolorum iure alias cupiditate sit, enim rem? Inventore.") %}<span style="display:inline-block;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt aut optio delectus voluptatibus omnis, nam minima vel. Nisi, atque sit! Error obcaecati cumque inventore rem commodi eligendi autem praesentium odit.</span>{% endcall %}</p>
    </div>
    <br>
    <br>
{% endblock body %}