Overview
The tooltip UI is the main modal interface that appears when users click the Knowledge button. It consists of a shell container with a header, tab bar, and content area, positioned intelligently relative to the selected text.
The createTooltipShell() function builds the complete tooltip structure:
function createTooltipShell(language) {
removeTooltip();
createBackdrop();
tooltip = document.createElement('div');
tooltip.className = 'wiki-tooltip';
if (language === 'ar') {
tooltip.setAttribute('dir', 'rtl');
tooltip.classList.add('rtl');
}
// Header
tooltip.appendChild(createHeader(language));
// Tab bar
tooltip.appendChild(createTabBar(language));
// Content area
const content = document.createElement('div');
content.className = 'wiki-tooltip-content';
content.id = 'wiki-tooltip-content-area';
tooltip.appendChild(content);
positionTooltip(tooltip);
document.body.appendChild(tooltip);
setTimeout(() => tooltip.classList.add('visible'), 10);
return content;
}
- Removes any existing tooltip before creating a new one
- Creates a backdrop overlay for focus and dismissal
- Supports RTL (right-to-left) layout for Arabic
- Returns the content area element for rendering tab content
- Uses CSS transitions for smooth appearance
The tooltip is appended directly to document.body to avoid z-index and overflow issues with the host page’s CSS.
function createHeader(language) {
const header = document.createElement('div');
header.className = 'wiki-tooltip-header';
const title = document.createElement('span');
title.className = 'wiki-tooltip-title';
title.textContent = language === 'ar' ? 'بحث المعرفة' : 'Knowledge Tooltip';
const closeBtn = document.createElement('button');
closeBtn.className = 'wiki-tooltip-close';
closeBtn.textContent = '\u00d7';
closeBtn.addEventListener('click', removeTooltip);
header.appendChild(title);
header.appendChild(closeBtn);
return header;
}
- English: “Knowledge Tooltip”
- Arabic: “بحث المعرفة” (Knowledge Search)
Intelligent Positioning
The tooltip is positioned relative to the Knowledge button to stay within the viewport:
function positionTooltip(tooltip) {
if (!button) return;
const buttonRect = button.getBoundingClientRect();
const tooltipWidth = 400;
const tooltipMargin = 10;
let top = buttonRect.bottom + window.scrollY + tooltipMargin;
let left = buttonRect.left + window.scrollX - (tooltipWidth / 2) + (buttonRect.width / 2);
if (left + tooltipWidth > window.innerWidth) {
left = window.innerWidth - tooltipWidth - tooltipMargin;
}
if (left < tooltipMargin) {
left = tooltipMargin;
}
if (top + 300 > window.innerHeight + window.scrollY) {
top = buttonRect.top + window.scrollY - 310;
}
tooltip.style.top = `${top}px`;
tooltip.style.left = `${left}px`;
}
- Default: Centers below the button with a 10px margin
- Horizontal overflow: Adjusts to stay within viewport bounds
- Vertical overflow: Flips above the button if insufficient space below
The tooltip uses fixed width (400px) and accounts for scroll position to maintain correct placement on scrolled pages.
Backdrop Overlay
The backdrop provides visual focus and enables click-outside-to-close:
function createBackdrop() {
removeBackdrop();
backdrop = document.createElement('div');
backdrop.className = 'wiki-tooltip-backdrop';
backdrop.addEventListener('click', removeTooltip);
document.body.appendChild(backdrop);
setTimeout(() => backdrop.classList.add('visible'), 10);
}
Loading Indicator
While fetching content, a loading spinner is displayed:
function createLoadingIndicator() {
const loader = document.createElement('div');
loader.className = 'wiki-tooltip-tab-loading';
const spinner = document.createElement('div');
spinner.className = 'wiki-tooltip-loader small';
const loadingText = document.createElement('p');
loadingText.textContent = currentLanguage === 'ar' ? 'جاري التحميل...' : 'Loading...';
loadingText.style.fontSize = '13px';
loadingText.style.color = '#72777d';
loader.appendChild(spinner);
loader.appendChild(loadingText);
return loader;
}
Cleanup
Tooltip removal is handled by multiple functions:
removeTooltip() - Removes the tooltip elementremoveBackdrop() - Removes the backdrop overlayremoveButton() - Removes the Knowledge button trigger
All cleanup functions check for element existence before removal to avoid errors during rapid interactions.