Is there an existing issue for this?

• I have searched the existing issues

What happened?

Currently, the dnnHelperTip function (used for module drag-and-drop tooltips) sets the tooltip's absolute position based directly on the mouse's X coordinate (e.pageX). It lacks a check for the window's viewport width.

As a result, when a user moves the mouse cursor near the right edge of the browser window, the tooltip container extends outside the viewport, triggering an unwanted horizontal scrollbar.

Affected File: ~/js/dnn.jquery.js (Function: $.fn.dnnHelperTip)

Proposed Fix: I have modified the mousemove event handler to calculate the tooltip width against the window width. If an overflow is detected, the tooltip's position is constrained to the left of the cursor to keep it inside the viewport.

Code Change: In $.fn.dnnHelperTip, inside the $pd.on('mousemove', ...) event:
// BEFORE (Original Code):

$pd.on('mousemove', function (e) {
    var x = e.pageX; var y = e.pageY;
    var pos = $('body').css('position');
    if (pos == 'relative') y -= 38;
    pd.tooltipWrapper.css({ left: x + 'px', top: y + 'px', 'z-index': '99999' });
});

// AFTER (Proposed Fix):

$pd.on('mousemove', function (e) {
    var x = e.pageX; var y = e.pageY;

    // Fix: Check if tooltip overflows the right edge of the window
    var tipWidth = pd.tooltipWrapperInner.outerWidth();
    var winWidth = $(window).width();
    
    // Safety buffer of 20px for vertical scrollbar
    if ((x + tipWidth) > (winWidth - 20)) {
        // Clamp x position to fit inside the screen
        x = winWidth - tipWidth - 20; 
    }

    var pos = $('body').css('position');
    if (pos == 'relative') y -= 38;
    pd.tooltipWrapper.css({ left: x + 'px', top: y + 'px', 'z-index': '99999' });
});

Steps to reproduce?

1. Log in to a DNN site with Edit permissions.
2. Hover over a Module Title (grip icon) to trigger the drag-and-drop helper tip.
3. Move the mouse cursor towards the far right edge of the screen.
4. Result: A horizontal scrollbar appears on the browser, and the page layout may shift.

Current Behavior

No response

Expected Behavior

No response

Relevant log output

Anything else?

--- Discussion / RFC : Modernizing the Tooltip Behavior

While the fix provided above resolves the immediate horizontal scrollbar issue, I would like to raise a discussion regarding the UX and performance of this feature.

The current "follow-mouse" behavior relies on JavaScript event listeners (mousemove) which adds unnecessary overhead and complexity. In modern web development, this pattern is often replaced by static, centered tooltips.

Proposal: Would the community consider deprecating this JavaScript-based $.fn.dnnHelperTip in favor of a lightweight, Pure CSS approach?

Benefits:

Performance: Zero JavaScript calculations on mouse move.

Stability: Completely eliminates edge-case bugs like the horizontal scrollbar issue.

UX: A tooltip centered above/below the module title feels more stable and professional than one that trails the cursor.

I believe simplifying this to a CSS-only implementation would be a great step forward. I would love to hear your thoughts on this.

Affected Versions

10.2.0 (latest v10 release)

What browsers are you seeing the problem on?

Chrome

Code of Conduct

• I agree to follow this project's Code of Conduct