Office of Diversity and Inclusion Component Library

Image Tooltip 

<div class="image_tooltip js-image-tooltip">
    <button type="button" id="image_tooltip_button_image_tooltip-2" class="image_tooltip_open_btn js-btn-open js-swap" data-swap-target="#image_tooltip_image_tooltip-2" data-swap-linked="tooltip_image_tooltip-2" aria-label="OpenImage  Tooltip" aria-controls="image_tooltip_image_tooltip-2" aria-pressed="false">

        <svg class="icon icon_tooltip_open">
            <use href="/images/icons.svg#tooltip_open" />
        </svg>

    </button>

    <div role="tooltip" id="image_tooltip_image_tooltip-2" class="image_tooltip_content js-content" aria-labelledby="image_tooltip_button_image_tooltip-2" aria-expanded="false">
        <div class="image_tooltip_content_inner">
            <button type="button" class="image_tooltip_close_btn js-swap js-btn-close" data-swap-target="#image_tooltip_image_tooltip-2" data-swap-linked="tooltip_image_tooltip-2" aria-label="Close Image Tooltip">

                <svg class="icon icon_tooltip_close">
                    <use href="/images/icons.svg#tooltip_close" />
                </svg>

            </button>

            <div class="image_tooltip_content_text">

            </div>
        </div>
    </div>
</div>
 
{% set tooltip_id = uniqid("image_tooltip") %}

<div class="image_tooltip js-image-tooltip">
	<button type="button" id="image_tooltip_button_{{ tooltip_id }}" class="image_tooltip_open_btn js-btn-open js-swap" data-swap-target="#image_tooltip_{{ tooltip_id }}" data-swap-linked="tooltip_{{ tooltip_id}}" aria-label="OpenImage  Tooltip" aria-controls="image_tooltip_{{ tooltip_id }}" aria-pressed="false">
		{{ icon("tooltip_open") }}
	</button>

	<div role="tooltip" id="image_tooltip_{{ tooltip_id }}" class="image_tooltip_content js-content" aria-labelledby="image_tooltip_button_{{ tooltip_id }}" aria-expanded="false">
		<div class="image_tooltip_content_inner">
			<button type="button" class="image_tooltip_close_btn js-swap js-btn-close" data-swap-target="#image_tooltip_{{ tooltip_id }}" data-swap-linked="tooltip_{{ tooltip_id}}"  aria-label="Close Image Tooltip">
				{{ icon("tooltip_close" )}}
			</button>

			<div class="image_tooltip_content_text">
				{{ text }}
			</div>
		</div>
	</div>
</div>

No notes defined.