74 lines
2.2 KiB
JavaScript
74 lines
2.2 KiB
JavaScript
/**
|
|
* @file
|
|
* JavaScript behaviors for element help text (tooltip).
|
|
*/
|
|
|
|
(function ($, Drupal) {
|
|
|
|
'use strict';
|
|
|
|
// @see http://api.jqueryui.com/tooltip/
|
|
Drupal.webform = Drupal.webform || {};
|
|
Drupal.webform.elementHelpIcon = Drupal.webform.elementHelpIcon || {};
|
|
Drupal.webform.elementHelpIcon.options = Drupal.webform.elementHelpIcon.options || {
|
|
position: {my: 'left+5 top+5', at: 'left bottom', collision: 'flipfit'},
|
|
tooltipClass: 'webform-element-help--tooltip',
|
|
// @see https://stackoverflow.com/questions/18231315/jquery-ui-tooltip-html-with-links
|
|
show: {delay: 100},
|
|
close: function (event, ui) {
|
|
ui.tooltip.hover(
|
|
function () {
|
|
$(this).stop(true).fadeTo(400, 1);
|
|
},
|
|
function () {
|
|
$(this).fadeOut('400', function () {
|
|
$(this).remove();
|
|
});
|
|
});
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Element help icon.
|
|
*
|
|
* @type {Drupal~behavior}
|
|
*/
|
|
Drupal.behaviors.webformElementHelpIcon = {
|
|
attach: function (context) {
|
|
$(context).find('.webform-element-help').once('webform-element-help').each(function () {
|
|
var $link = $(this);
|
|
|
|
var options = $.extend({
|
|
// Use 'data-webform-help' attribute which can include HTML markup.
|
|
content: $link.attr('data-webform-help'),
|
|
items: '[data-webform-help]'
|
|
}, Drupal.webform.elementHelpIcon.options);
|
|
|
|
$link.tooltip(options)
|
|
.on('click', function (event) {
|
|
// Prevent click from toggling <label>s wrapped around help.
|
|
event.preventDefault();
|
|
});
|
|
|
|
// Help tooltips are generally placed with <label> tags.
|
|
// Screen readers are also reading the <label> and the
|
|
// 'aria-describedby' attribute.
|
|
// To prevent this issue we are removing the <label>'s 'for' attribute
|
|
// when the tooltip is focused.
|
|
var $label = $(this).parent('label');
|
|
var labelFor = $label.attr('for') || '';
|
|
if ($label.length && labelFor) {
|
|
$link
|
|
.on('focus', function () {
|
|
$label.removeAttr('for');
|
|
})
|
|
.on('blur', function () {
|
|
$label.attr('for', labelFor);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
})(jQuery, Drupal);
|