Tool Tip
The tool tip component provides a pop up tool tip modal when clicked.
By default this tool tip is offset. To center it on the container use
the .tool-tip--center modifier class.
Requires:
dist/js/toggle-class/toggle-class.bundle.js
If you'd like to use the credit card styling you'll also need the media object.
.tool-tip--center
Center the tool tip. Useful when used with a single icon.
{{ attach_library('h4h_theme/tool-tip') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
{#
Set some dummy selector_id's for KSS so multiple instances of the
tool tip can be shown.
#}
{% if kss %}
{% if modifier_class == 'tool-tip--center' %}
{% set selector_id = 'ccv-code-example-1' %}
{% else %}
{% set selector_id = 'ccv-code-example-2' %}
{% endif %}
{% endif %}
<a href="#{{ selector_id }}" data-toggle-class="is-visible" data-target="#{{ selector_id }}" title="{{ label }}" class="tool-tip {{ modifier_class }}">
{{ icons.get('question', 'tool-tip__icon') }}
{#
To showcase how the tool-tip--center modifier is best used,
if KSS is showing the `tool-tip--center` modifier, hide the label.
#}
{% if kss and modifier_class == 'tool-tip--center' %}
{% else %}
<span class="tool-tip__label">{{ label }}</span>
{% endif %}
<div id="{{ selector_id }}" class="tool-tip__body">
{{ icons.get('close', 'tool-tip__close') }}
{% if kss %}
<p>We user your security code (CVV code) to verify your credit card.</p>
<div class="media-object media-object--no-wrap media-object--small">
<div class="media-object__image">
<img src="../../dist/assets/cc-cvv.svg" alt="CVV Code" />
</div>
<div class="media-object__body">
<p><small><strong>Visa, MasterCard, Discover:</strong></small><br><small>Look for a 3-digit number on the back of your card.</small></p>
</div>
</div>
<div class="media-object media-object--no-wrap media-object--small">
<div class="media-object__image">
<img src="../../dist/assets/cc-cvv-amex.svg" alt="CVV Code American Express" />
</div>
<div class="media-object__body">
<p><small><strong>American Express:</strong></small><br><small>Look for a 4-digit code on the front of your card, above the account number.</small></p>
</div>
</div>
{% else %}
{{ body|raw }}
{% endif %}
</div>
</a>