Language tabs tooltip overlapping tabs

[adrianbj]

When I go to click a tab, this text appears on hover making everything hard to read.

[adrianbj]

@ryancramerdesign - not sure why you can't reproduce - do you see the "click twice...." tooltip at all? Maybe you don't have enough languages installed to have them populate far enough to be in the way?

Does this help?

[adrianbj]

The tooltip is the "click twice to change all tabs" note from LanguageTabs.module. It's a element rendered immediately before the

of tabs:

// wire/modules/LanguageSupport/LanguageTabs.module:224
$note = "" .
$this->_('click twice to change all tabs') . "";
$content = "

$note<ul$attrs>$tabs

$content";

It is positioned absolute; top: 5px; right: 1em over the .langTabs container, and faded in on tab hover by LanguageTabs.js. Why you can't reproduce it, Ryan: the only guard
before fade-in is a container-width check ($parent.width() < 500), so on wide containers with only a few languages, the note sits in the empty space to the right of the tabs.
With many languages (Adrian has Default / Kurdish / Sorani / Persian / Urdu / Vietnamese in the screenshot) the

extends all the way across that empty space, and the
absolutely-positioned note lands on top of the rightmost tabs — exactly what the screenshot shows.

Proposed fix

In wire/modules/LanguageSupport/LanguageTabs.js around the mouseover handler at line 92, skip the fade-in when the tabs

would overlap where the note appears. Patch:

                var $links = $this.find('a.langTabLink');                                                                                                                           
                var timeout = null;
                var $note = $parent.find('.langTabsNote');
  +             var $ul = $this.children('ul');                                                                                                                                     
   
                if(!$links.length) {                                                                                                                                                
                        $links = $this.find('a[data-lang]'); // fallback if missing langTabLink class
                        if(!$links.length) $links = $this.find('a');                                                                                                                
                        $links.addClass('langTabLink');                                                                                                                             
                }                                                                                                                                                                   
                                                                                                                                                                                    
                $links.on('mouseover', function() {
                        if(timeout) clearTimeout(timeout);
                        if($parent.width() < 500) return;
  +                     // skip if tabs would visually overlap the note                                                                                                             
  +                     var noteWidth = $note.outerWidth(true);
  +                     if(!noteWidth) {                                                                                                                                            
  +                             // measure while still hidden                                                                                                                       
  +                             $note.css({ visibility: 'hidden', display: 'block' });
  +                             noteWidth = $note.outerWidth(true);                                                                                                                 
  +                             $note.css({ visibility: '', display: '' });                                                                                                         
  +                     }
  +                     if($ul.outerWidth() + noteWidth + 16 > $this.width()) return;                                                                                               
                        timeout = setTimeout(function() { $note.fadeIn('fast'); }, 250);
                }).on('mouseout', function() {                                                                                                                                      
                        if(timeout) clearTimeout(timeout);
                        if($parent.width() < 500) return;                                                                                                                           
                        timeout = setTimeout(function() { $note.fadeOut('fast'); }, 250);
                }).on('click', function() {                                                                                                                                         

Note: $this in that closure is the .langTabs element (set at line 60), so $this.width() is the right reference. The + 16 is a small buffer roughly matching the existing right:
1em offset in the CSS. LanguageTabs.min.js would need to be regenerated alongside this change.

Alternative (simpler, but a UX change)

Drop the absolutely-positioned .langTabsNote element entirely and put the hint on the tab links via title="click twice to change all tabs". The browser's native tooltip never
overlaps the tabs by definition, and there's no width/measurement logic to maintain. The trade-off is loss of the always-visible-on-hover indicator with the left-arrow glyph.