<div class="bux-tooltip__trigger bux-popover__trigger" style="display: inline-block;">
<span class="visually-hidden"></span>
<span class="icon icon-info-circle"></span>
<div class="bux-popover__container bux-tooltip__container">
<div class="bux-popover__caret ">
<svg viewBox="0 0 10 10">
<path class="caret--chevron"></path>
</svg>
</div>
<div class="bux-popover__body">
Additional information
</div>
</div>
</div>
{% if container_position == 'left' or container_position == 'right' %}
{% set container_position_class = ' container--position-' ~ container_position ~ '-of-trigger' %}
{% elseif container_position == 'above' or container_position == 'below' %}
{% set container_position_class = ' container--position-' ~ container_position ~ '-trigger' %}
{% else %}
{% set container_position_class = '' %}
{% endif %}
{% if container_align_to_caret %}
{% set container_caret_class = ' container--align-caret-' ~ container_align_to_caret %}
{% elseif container_justify_to_caret %}
{% set container_caret_class = ' container--justify-caret-' ~ container_justify_to_caret %}
{% else %}
{% set container_caret_class = '' %}
{% endif %}
{% if caret_justify_to_trigger %}
{% set caret_class = ' caret--justify-trigger-' ~ caret_justify_to_trigger %}
{% elseif caret_align_to_trigger %}
{% set caret_class = ' caret--align-trigger-' ~ caret_align_to_trigger %}
{% else %}
{% set caret_class = '' %}
{% endif %}
<div class="bux-tooltip__trigger bux-popover__trigger"{% if stay_open == "true" %} data-stay-open="true"{% endif %} style="display: inline-block;">
<span class="visually-hidden">{{ label }}</span>
<span class="icon icon-{{ trigger_icon }}"></span>
<div class="bux-popover__container bux-tooltip__container{{ container_position_class }}{{ container_caret_class }}">
<div class="bux-popover__caret {{ caret_class }}">
<svg viewBox="0 0 10 10">
<path class="caret--chevron"></path>
</svg>
</div>
<div class="bux-popover__body">
{{ text }}
</div>
</div>
</div>
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
trigger_icon: info-circle
text: Additional information
.bux-tooltip__container .bux-popover__body {
font-family: $sans;
font-size: $ts-sm;
padding: 8px 16px;
color: $white;
background-color: $gray-dark-60;
border-color: $gray-dark-60;
}
.bux-tooltip__container .bux-popover__caret svg path {
fill: $gray-dark-60;
stroke: $gray-dark-60;
}
const $tooltipConfig = {
queries: {
/* How the init function finds the tooltip trigger */
trigger: ".bux-tooltip__trigger", /* How the init function finds the tooltip body container */
container: ".bux-tooltip__container",
}
}
/**
* A class to manage tooltip positioning via BuxPopoverController
*/
class BuxTooltipController extends BuxPopoverController {
constructor(triggerElement, containerElement) {
/* BuxPopoverController takes care of toggling and positioning, and adds
* the trigger, caret, and container elements to the class */
super(triggerElement, containerElement);
this.hasMouseover = false;
this.hasFocus = false;
this.trigger.element.addEventListener("mouseenter", this.expandFromMouseenter.bind(this));
this.trigger.element.addEventListener("focus", this.expandFromFocus.bind(this));
this.trigger.element.addEventListener("blur", this.maybeCollapseFromBlur.bind(this));
this.trigger.element.addEventListener("mouseleave", this.maybeCollapseFromMouseleave.bind(this));
}
expandFromMouseenter() {
this.hasMouseover = true;
this.expand();
}
expandFromFocus() {
this.hasFocus = true;
this.expand();
}
maybeCollapseFromBlur() {
this.hasFocus = false;
if (!this.hasMouseover) {
this.collapse();
}
}
maybeCollapseFromMouseleave() {
this.hasMouseover = false;
if (!this.hasFocus) {
this.collapse();
}
}
}
/**
* Finds triggers, matches them with containers, and initializes controllers
*/
const initTooltips = () => Array.from(document.querySelectorAll($tooltipConfig.queries.trigger))
.map((trigger) => {
const container = trigger.querySelector($tooltipConfig.queries.container);
if (!container) {
console.warn(
"BUX Tooltip could not find a valid container for a tooltip trigger. This is probably an issue with the page markup, and functionality will be impacted.");
return;
}
return new BuxTooltipController(trigger, container);
});
initTooltips();
No notes defined.