diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php index 8b14cbf57..2824db650 100644 --- a/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php +++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php @@ -570,4 +570,20 @@ function fillAvailableHeight(params = { // default params // Add the new listener window.addEventListener('resize', window.fillAvailableHeightResizeHandler); } + +/** + * For every a.info element, we see if it has an inner span element. + * While the CSS will determine visibility, we still need to use JS to set the position of the "tooltip" span. + * Using the a.info element's offset position, we can calculate the top and left position needed for the span. + */ +$(document).on('mouseenter', 'a.info', function() { + const tooltip = $(this).find('span'); + if (tooltip.length) { + const aInfoPosition = $(this).offset(); + const addtionalOffset = 16; + const top = aInfoPosition.top + addtionalOffset; + const left = aInfoPosition.left + addtionalOffset; + tooltip.css({ top, left }); + } +}); diff --git a/emhttp/plugins/dynamix/styles/default-base.css b/emhttp/plugins/dynamix/styles/default-base.css index fd8a458c0..f9f17ea28 100644 --- a/emhttp/plugins/dynamix/styles/default-base.css +++ b/emhttp/plugins/dynamix/styles/default-base.css @@ -76,7 +76,7 @@ a.info span { font-variant: small-caps; /* - Must be fixed to avoid CSS limitation with overflow-x: auto; on TableContainer as overflow-y: visible; with that is not supported. - - Lack of position values - top, right, bottom, left - will cause the tooltip to be positioned relative to the parent element. + - position values are determined by JS in BodyInlineJS.php w/ the a.info element's offset position. */ position: fixed; line-height: 2rem;