Skip to content

Replace JS popup help with tooltips #1556

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cpeel merged 1 commit into from
Dec 26, 2025
Merged

Replace JS popup help with tooltips #1556

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion SETUP/tests/smoketests/pageload_smoketest.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@
BASE_TESTS = [
{'path': 'activity_hub.php'},
{'path': 'pastnews.php'},
{'path': 'pophelp.php?category=teams&name=edit_teamname'},
{'path': 'project.php?id=projectID5e23a810ef693'},
{'path': 'project.php?id=projectID5e23a810ef693&detail_level=1'},
{'path': 'project.php?id=projectID5e23a810ef693&detail_level=2'},
Expand Down
23 changes: 7 additions & 16 deletions faq/pophelp/prefs/prefs_pophelp.inc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,13 +71,6 @@ _("<p>This setting specifies how your credits will appear when a project is comp
'content' => _("<p>The language that the site will be presented in.</p>"),
],

// OBSOLETED. MAYBE.
//'set_lang' =>
// array (
// 'title' => _("Language"),
// 'content' => _("Your primary language.")
// );

'set_name' =>
[
'title' => _("Name"),
Expand Down Expand Up @@ -181,15 +174,13 @@ have them assigned directly to you.</p>
[
'title' => _("Interface Type"),
'content' =>
_("<p>This setting determines which proofreading interface you prefer.</p>

<p>The Standard Interface is the default and is designed to work with very minimal
browser requirements.</p>

<p>The Enhanced Interface has additional tools and features which are not present in the
Standard Interface and may require a more recent browser for complete functionality.</p>

<p>Both interfaces require a frames and JavaScript enabled browser as a minimum.</p>"),
_("<p>This setting determines which proofreading interface you prefer. Both interfaces require a frames and JavaScript enabled browser as a minimum.</p>
<ul>
<li>The Standard Interface is the default, uses text-based buttons,
and is designed to work with minimal browser requirements.</li>
<li>The Enhanced Interface uses images that have tooltips for buttons,
and some buttons not present in the Standard Interface.</li>
</ul>"),
],

// FIXME In the userprefs display, add hover text to these icons
Expand Down
21 changes: 0 additions & 21 deletions pinc/js_newpophelp.inc
View file
Open in desktop

This file was deleted.

18 changes: 18 additions & 0 deletions pinc/pophelp.inc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<?php

function get_pophelp_json(string $category): string
{
global $code_url, $code_dir;

if ($category == "prefs") {
include("$code_dir/faq/pophelp/prefs/prefs_pophelp.inc");
$help = $prefs_pophelp;
} elseif ($category == "teams") {
include("$code_dir/faq/pophelp/teams/teams_pophelp.inc");
$help = $teams_pophelp;
} else {
throw new ValueError("Invalid category");
}

return json_encode($help);
}
22 changes: 22 additions & 0 deletions scripts/pophelp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/* global popHelpData */

document.addEventListener("DOMContentLoaded", function () {
const pophelp = document.createElement("div");
pophelp.className = "pophelp";
document.body.appendChild(pophelp);

document.querySelectorAll("[data-pophelp]").forEach((elem) => {
elem.addEventListener("mouseenter", function () {
let content = popHelpData[this.dataset.pophelp]["content"];
pophelp.innerHTML = content;
const rect = this.getBoundingClientRect();
pophelp.style.left = rect.left + window.scrollX + "px";
pophelp.style.top = rect.bottom + window.scrollY + "px";
pophelp.style.display = "block";
});

elem.addEventListener("mouseleave", function () {
pophelp.style.display = "none";
});
});
});
20 changes: 10 additions & 10 deletions stats/includes/team.inc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -490,28 +490,28 @@ function showEdit($tname, $ttext, $twebpage, $tedit, $tsid)
echo "</th></tr>";

echo "<tr>";
echo "<td class='right-align'><b>"._("Team Name")."</b>:</td>";
echo "<td class='left-align'><input type='text' value='" . attr_safe($tname) . "' name='teamname' size='50' maxlength='50' required>&nbsp;<b><a href=\"JavaScript:newHelpWin('teamname');\">?</a></b></td>";
echo "<td class='right-align' data-pophelp='edit_teamname'><b>"._("Team Name")."</b>:</td>";
echo "<td class='left-align'><input type='text' value='" . attr_safe($tname) . "' name='teamname' size='50' maxlength='50' required></td>";
echo "</tr>";

echo "<tr>";
echo "<td class='right-align'><b>"._("Team Webpage")."</b>:</td>";
echo "<td class='left-align'><input type='text' value='$twebpage' name='teamwebpage' size='50' maxlength='255'>&nbsp;<b><a href=\"JavaScript:newHelpWin('teamwebpage');\">?</a></b></td>";
echo "<td class='right-align' data-pophelp='edit_teamwebpage'><b>"._("Team Webpage")."</b>:</td>";
echo "<td class='left-align'><input type='text' value='$twebpage' name='teamwebpage' size='50' maxlength='255'></td>";
echo "</tr>";

echo "<tr>";
echo "<td class='right-align'><b>"._("Team Avatar")."</b>:</td>";
echo "<td class='left-align'><input type='file' name='teamavatar' size='50'>&nbsp;<b><a href=\"JavaScript:newHelpWin('teamavatar');\">?</a></b></td>";
echo "<td class='right-align' data-pophelp='edit_teamavatar'><b>"._("Team Avatar")."</b>:</td>";
echo "<td class='left-align'><input type='file' name='teamavatar' size='50'></td>";
echo "</tr>";

echo "<tr>";
echo "<td class='right-align'><b>"._("Team Icon")."</b>:</td>";
echo "<td class='left-align'><input type='file' name='teamicon' size='50'>&nbsp;<b><a href=\"JavaScript:newHelpWin('teamicon');\">?</a></b></td>";
echo "<td class='right-align' data-pophelp='edit_teamicon'><b>"._("Team Icon")."</b>:</td>";
echo "<td class='left-align'><input type='file' name='teamicon' size='50'></td>";
echo "</tr>";

echo "<tr>";
echo "<td class='right-align' style='vertical-align: top;'><b>"._("Team Description")."</b></td>";
echo "<td class='left-align' style='vertical-align: top;'><textarea name='text_data' cols='40' rows='6'>" . html_safe(unstripAllString($ttext)) . "</textarea>&nbsp;<b><a href=\"JavaScript:newHelpWin('teamdesc');\">?</a></b></td>";
echo "<td class='right-align' data-pophelp='edit_teamdesc' style='vertical-align: top;'><b>"._("Team Description")."</b></td>";
echo "<td class='left-align' style='vertical-align: top;'><textarea name='text_data' cols='40' rows='6'>" . html_safe(unstripAllString($ttext)) . "</textarea></td>";
echo "</tr>";

echo "<tr>";
Expand Down
7 changes: 5 additions & 2 deletions stats/teams/new_team.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,18 @@
$relPath = "./../../pinc/";
include_once($relPath.'base.inc');
include_once($relPath.'theme.inc');
include_once($relPath.'js_newpophelp.inc');
include_once($relPath.'pophelp.inc');
include_once($relPath.'metarefresh.inc');
include_once('../includes/team.inc'); // showEdit()

require_login();

$user = User::load_current();

$theme_extra_args = ["js_data" => get_newHelpWin_javascript("$code_url/pophelp.php?category=teams&name=edit_")];
$theme_extra_args = [
"js_data" => "var popHelpData = " . get_pophelp_json("teams") . ";",
"js_files" => ["$code_url/scripts/pophelp.js"],
];

$teamname = trim($_POST["teamname"] ?? "");
$text_data = stripAllString($_POST["text_data"] ?? "");
Expand Down
7 changes: 5 additions & 2 deletions stats/teams/tedit.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,16 @@
$relPath = "./../../pinc/";
include_once($relPath.'base.inc');
include_once($relPath.'theme.inc');
include_once($relPath.'js_newpophelp.inc');
include_once($relPath.'pophelp.inc');
include_once($relPath.'metarefresh.inc');
include_once('../includes/team.inc');

require_login();

$theme_extra_args = ["js_data" => get_newHelpWin_javascript("$code_url/pophelp.php?category=teams&name=edit_")];
$theme_extra_args = [
"js_data" => "var popHelpData = " . get_pophelp_json("teams") . ";",
"js_files" => ["$code_url/scripts/pophelp.js"],
];

// Either the parameter is $_POST['tsid'] when coming from the edit form,
// or it is $_GET['tid'] when using the link on top of the team summary.
Expand Down
15 changes: 15 additions & 0 deletions styles/layout.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1834,6 +1834,21 @@ p.mentor-oldest {
.center-align;
}

/* ------------------------------------------------------------------------ */
/* Popup Help */

.pophelp {
.solid-border;
display: none;
position: absolute;
background-color: @page-background;
color: @page-text;
padding: 0 5px;
border-radius: 5px;
z-index: 1000;
font-size: 90%;
}

/* ------------------------------------------------------------------------ */
/* Diff styling */
/* Import diff styling from MediaWiki */
Expand Down
13 changes: 13 additions & 0 deletions styles/themes/charcoal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2822,6 +2822,19 @@ p.mentor-oldest {
text-align: center;
}
/* ------------------------------------------------------------------------ */
/* Popup Help */
.pophelp {
border: thin solid #565656;
display: none;
position: absolute;
background-color: #262626;
color: #e2e2e2;
padding: 0 5px;
border-radius: 5px;
z-index: 1000;
font-size: 90%;
}
/* ------------------------------------------------------------------------ */
/* Diff styling */
/* Import diff styling from MediaWiki */
/*!
Expand Down
13 changes: 13 additions & 0 deletions styles/themes/classic_grey.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2822,6 +2822,19 @@ p.mentor-oldest {
text-align: center;
}
/* ------------------------------------------------------------------------ */
/* Popup Help */
.pophelp {
border: thin solid #000000;
display: none;
position: absolute;
background-color: #ffffff;
color: #000000;
padding: 0 5px;
border-radius: 5px;
z-index: 1000;
font-size: 90%;
}
/* ------------------------------------------------------------------------ */
/* Diff styling */
/* Import diff styling from MediaWiki */
/*!
Expand Down
13 changes: 13 additions & 0 deletions styles/themes/project_gutenberg.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2822,6 +2822,19 @@ p.mentor-oldest {
text-align: center;
}
/* ------------------------------------------------------------------------ */
/* Popup Help */
.pophelp {
border: thin solid #000000;
display: none;
position: absolute;
background-color: #ffffff;
color: #000000;
padding: 0 5px;
border-radius: 5px;
z-index: 1000;
font-size: 90%;
}
/* ------------------------------------------------------------------------ */
/* Diff styling */
/* Import diff styling from MediaWiki */
/*!
Expand Down
13 changes: 13 additions & 0 deletions styles/themes/royal_blues.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2822,6 +2822,19 @@ p.mentor-oldest {
text-align: center;
}
/* ------------------------------------------------------------------------ */
/* Popup Help */
.pophelp {
border: thin solid #000000;
display: none;
position: absolute;
background-color: #ffffff;
color: #000000;
padding: 0 5px;
border-radius: 5px;
z-index: 1000;
font-size: 90%;
}
/* ------------------------------------------------------------------------ */
/* Diff styling */
/* Import diff styling from MediaWiki */
/*!
Expand Down
7 changes: 2 additions & 5 deletions tools/project_manager/editproject.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,9 @@
include_once('edit_common.inc');
include_once($relPath.'project_edit.inc');
include_once($relPath.'wordcheck_engine.inc');
include_once($relPath.'js_newpophelp.inc');

require_login();

$theme_args['js_data'] = get_newHelpWin_javascript("$code_url/faq/pophelp/project_manager/");

$return = $_REQUEST["return"] ?? "$code_url/tools/project_manager/projectmgr.php";

if (!user_is_PM()) {
Expand Down Expand Up @@ -52,7 +49,7 @@
}
}

output_header($page_title, NO_STATSBAR, $theme_args);
output_header($page_title, NO_STATSBAR);
echo "<h1>$page_title</h1>\n";

if ($errors) {
Expand Down Expand Up @@ -107,7 +104,7 @@
$fatal_error = sprintf(_("parameter '%s' is invalid"), 'action') . ": '$requested_action'";
}

output_header($page_title, NO_STATSBAR, $theme_args);
output_header($page_title, NO_STATSBAR);
echo "<h1>$page_title</h1>\n";

if ($fatal_error != '') {
Expand Down
Loading