diff --git a/lib/forms/Form.js b/lib/forms/Form.js
index 3be91b3..631a3c5 100644
--- a/lib/forms/Form.js
+++ b/lib/forms/Form.js
@@ -188,10 +188,6 @@ function MLForm$$createForm(schema, hostObject, formData, template) {
 
             // allow schema to define confined CSS per form
             form.style = restyle('#' + id, Object.assign({
-                '.centered-tooltip .form-tooltip-content-wrapper': {
-                    left: '50%',
-                    transform: 'translateX(-50%)'
-                },
                 '.form-tooltip:hover .form-tooltip-anchor-bottom': {
                     display: 'inline-block'
                 },
@@ -232,14 +228,25 @@ function MLForm$$createForm(schema, hostObject, formData, template) {
             }, schema.style || {}), [], form.el.ownerDocument);
             form.el.id = id;
             form.el.querySelectorAll('.form-tooltip').forEach(function (tooltip) {
-                const tooltipbb = tooltip.getBoundingClientRect();
-                const wrapper = tooltip.querySelector('.form-tooltip-content-wrapper');
-                wrapper.style.display = 'inline-block';
-                const wrapbb = wrapper.getBoundingClientRect();
-                wrapper.setAttribute('style', undefined);
-                if (!(tooltipbb.right < wrapbb.right)) {
-                    tooltip.classList.add('centered-tooltip');
-                    wrapper.style.marginLeft = (wrapbb.right - tooltipbb.right) + 'px';
+                tooltip.addEventListener('mouseenter', initTooltipPosition);
+
+                function initTooltipPosition() {
+                    const tooltipbb = tooltip.getBoundingClientRect();
+                    const wrapper = tooltip.querySelector('.form-tooltip-content-wrapper');
+                    wrapper.style.display = 'inline-block';
+                    const wrapbb = wrapper.getBoundingClientRect();
+
+                    const toolTipCentrePoint = tooltipbb.left + (tooltipbb.width / 2);
+                    const wrapperCentrePoint = wrapbb.left + (wrapbb.width / 2);
+                    wrapper.style.marginLeft = `${Math.max(0, toolTipCentrePoint - wrapperCentrePoint)}px`;
+
+                    tooltip.addEventListener('mouseleave', function cleanup() {
+                        wrapper.style.display = '';
+
+                        tooltip.removeEventListener('mouseenter', initTooltipPosition);
+                        tooltip.removeEventListener('mouseleave', cleanup);
+
+                    });
                 }
             });
         };