Skip to content
Snippets Groups Projects

Issue #3354359: How to Position tooltip to above the icon?

5 files
+ 81
8
Compare changes
  • Side-by-side
  • Inline
Files
5
+ 11
2
@@ -10,7 +10,7 @@
// Check if there are any fields that are configured as tooltip.
if (tooltipFields.length) {
tooltipFields.each(function () {
$(once('fieldDescriptionTooltip', tooltipFields, context)).each(function () {
let description = $(this).find('[data-drupal-field-elements="description"], [class*="description"]');
// Check if there is a description available in order to start the
@@ -22,11 +22,20 @@
let lineBreak = '<br />';
// Remove the description text and move it to the "title" attribute.
$(this).html('<img width="20" src="/' + settings.fieldDescriptionTooltip.img + '" />');
$(this).attr('title', tooltipText);
$(this).html('<img width="20" src="/' + settings.fieldDescriptionTooltip.img + '" />');
// Set the tooltip position.
let position_my = settings.fieldDescriptionTooltip.position.my_1 + ' ' + settings.fieldDescriptionTooltip.position.my_2;
let position_at = settings.fieldDescriptionTooltip.position.at_1 + ' ' + settings.fieldDescriptionTooltip.position.at_2;
// Add the tooltip js trigger.
$(this).tooltip({
position: {
my: position_my,
at: position_at
},
effect: "slideDown",
show: { effect: "slideDown" },
// For any custom styling.
tooltipClass: "description-tooltip",
Loading