<!--
HTML tags for title and paragraph can be set on demand, also possible to just use a paragraph.
You can also change the default width of the tool-tip.

{# - Usage -
<tool-tip width="325px">
    <h4 slot="title">{{ _("Merkle Proof Validation") }}</h4>
    <span slot="paragraph">
        {{ _('Specter Desktop validates <a href="https://github.com/bitcoin/bips/blob/master/bip-0037.mediawiki" target="_blank">BIP 37</a> Merkle Proofs from your full node <strong>guaranteeing</strong> that transactions displayed as confirmed have been included in the specified block hash.') }}<br><br>
        {{ _("However, a compromised full node could return a fake block that was never mined.") }}
        {{ _("To be sure, you could double check the block hash in other locations (other nodes, block explorers, etc).") }}
    </span>
</tool-tip>
#}
-->

<template id="tool-tip-template-id">
    <style>
        .tool-tip {
            display: inline-block;
            position: relative;
            margin-left: 0.5em;
        }
        .tool-tip .tool-tip__icon {
            color: #fff;
            background: #27b1f0;
            border-radius: 10px;
            cursor: pointer;
            display: inline-block;
            font-style: italic;
            font-family: times new roman;
            height: 20px;
            line-height: 1.3em;
            text-align: center;
            width: 20px;
        }
        .tool-tip .tool-tip__info {
            display: none;
            background: #262626;
            border: 1px solid #27b1f0;
            border-radius: 3px;
            padding: 1em;
            position: absolute;
            left: 30px;
            top: -20px;
            width: 250px;
            z-index: 2;
        }
        .tool-tip .tool-tip__info:before, .tool-tip .tool-tip__info:after {
            content: "";
            position: absolute;
            left: -10px;
            top: 7px;
            border-style: solid;
            border-width: 10px 10px 10px 0;
            border-color: transparent #27b1f0;
        }
        .tool-tip .tool-tip__info:after {
            left: -8px;
            border-right-color: #262626;
        }
        .tool-tip .tool-tip__info .info {
            display: block;
        }
        .tool-tip .tool-tip__info .info__title {
            color: #4A90E2;
            font-weight: 400;
        }
        .tool-tip .tool-tip__info .paragraph {
            display: block;
            font-weight: 100;
            font-size: 14px;
        }
        .tool-tip:hover .tool-tip__info, .tool-tip:focus .tool-tip__info {
            display: inline-block;
        }

        a:focus + .tool-tip_basic .tool-tip__info {
            display: inline-block;
        }
        @media (hover: none) {
            .tool-tip {
                display: none;
            }
        }
    </style>

    <div class="tool-tip">
        <i class="tool-tip__icon">i</i>
        <div class="tool-tip__info" id="tool-tip-box">
            <slot name="title" class="info__title"></slot>
            <slot name="paragraph" class="paragraph"></slot>
        </div>
    </div>
    
</template>
  
<script type="module">
    class TooltipElement extends HTMLElement {
        constructor() {
            super();
            var shadowRoot = this.attachShadow({mode: 'open'});
            var template = document.getElementById('tool-tip-template-id');
            var clone = template.content.cloneNode(true);
            this.tooltipBox = clone.getElementById("tool-tip-box")
            this.tooltipBox.style.width = this.getAttribute("width");
            shadowRoot.appendChild(clone);
        }
    }
customElements.define('tool-tip', TooltipElement);
</script>