Tooltips in TOC (#2561)

* Add tooltip

* Simplify usage

* Remove tooltip test from sidebar

* Get clickable "notice" components that expands upon click

* Convert it to hover effect

* Refine tooltip style further

* Refine tooltip examples in sidebars.js

* Fix styles

* Refine tooltips examples & styles

* Slightly tweak dark mode tooltip styles

* Translate code comment

* Translate code comment

* Add comment on how to use value in HTML notices

* Fix gitignore

* Apply various examples of tooltips to TOC

* Adjust CSS

* Rename properties for HTML type to better handle tooltips

* Fix admin panel custom. tooltip

Author: pwizla

docusaurus/.gitignore

@@ -29,9 +29,7 @@ docs/node_modules/**
 *.py
 
 # LLMs.txt files and related
-# llms*.txt
-# **/llms*.txt
-
-# Internal tmp tests
+llms*.txt
+**/llm*.txt
 pr-*.diff
 *-results.json

docusaurus/sidebars.js

@@ -213,6 +213,7 @@ const sidebars = {
       collapsible: false,
       className: 'category-cms-configurations',
       items: [
+
         {
           type: 'doc',
           label: 'Configurations introduction',
@@ -223,9 +224,25 @@ const sidebars = {
           label: 'Admin panel',
           collapsed: true,
           customProps: {
-            updated: true,
+            updated: false,
+            text: "The section has been simplified",
+            tooltip: `We simplified the admin panel configuration section to make it easier to navigate and find what you need.</div>
+              <div>The new structure groups configurations by their purpose, making it more intuitive to locate specific settings.</div>
+              <div><em>Notes: </em>
+              <ul>
+                <li>Lifecycle functions documentation has been moved to the Development section.</li>
+                <li>Email and Upload Providers documentation have been included in the corresponding Features pages.</li>
+              </div>`
           },
           items: [
+            // {
+            //   type: 'html',
+            //   value: 'placeholder', // a value is required for the HTML type, but it is not rendered
+            //   customProps: {
+            //     text: "The section has been simplified",
+            //     tooltip: `We simplified the admin panel configuration section to make it easier to navigate and find what you need.</div><div>The new structure groups configurations by their purpose, making it more intuitive to locate specific settings.</div>`
+            //   }
+            // },
             {
               type: 'link',
               label: 'Introduction',
@@ -284,14 +301,27 @@ const sidebars = {
           ]
         },
         'cms/configurations/api',
-        'cms/configurations/cron',
+        {
+          type: 'doc',
+          id: 'cms/configurations/cron',
+          customProps: {
+            updated: false,
+            // tooltip: `<strong>Important changes</strong><br/><br/>
+            // <span>This tooltip can be used to display short pieces of information.</span><br><br>
+            // We may use bullets in the tooltip as well:<br>
+            // <ul>
+            //   <li>This item is purely informative</li>
+            //   <li>Please avoid using links here as those tooltips are not hoverable</li>
+            // </ul><br/>`
+          },
+        },
         {
           type: 'category',
           collapsed: true,
           collapsible: true,
           label: "Database",
           customProps: {
-            updated: false,
+            tooltip: 'This section now regroups all the database-related configurations and guides, including migrations and transactions.' 
           },
           items: [
             {
@@ -369,9 +399,32 @@ const sidebars = {
           label: 'Admin panel customization',
           collapsed: true,
           customProps: {
-            updated: true,
+            updated: false,
+            // text: `The section has been reorganized`,
+            // tooltip: `We have reorganized the admin panel customization section to make it easier to navigate and find what you need.</div>
+            //   <div>The new structure groups customizations by their purpose, making it more intuitive to locate specific settings.</div>
+            //   <div><em>Notes: </em>
+            //   <ul>
+            //     <li>Deployment-related configuration has been moved to the Configurations > Admin panel > Admin panel server page.</li>
+            //     <li>Host, port, and path configuration documentation has been moved to the Configurations > Server page.</li>
+            //   </ul>`
+            tooltip: "This section has been reorganized, see details below.",
           },
           items: [
+            {
+              type: 'html',
+              value: 'placeholder', // a value is required for the HTML type, but it is not rendered
+              customProps: {
+                tooltipTitle: `The section has been reorganized`,
+                tooltipContent: `We have reorganized the admin panel customization section to make it easier to navigate and find what you need.</div>
+                  <br/><br/>
+                  <div>The new structure groups customizations by their purpose, making it more intuitive to locate specific settings.</div>
+                  <br/>
+                  <div><em>Note: </em>
+                    Deployment-related configuration, including host, port, and path configuration, has been moved to the Configurations > Admin panel > <a href="/cms/configurations/admin-panel#admin-panel-server">Admin panel server</a> page.
+                  </div>`
+              }, 
+            },
             {
               type: 'doc',
               id: 'cms/admin-panel-customization',
@@ -423,6 +476,14 @@ const sidebars = {
       collapsible: false,
       className: 'category-cms-typescript', // TODO: add CSS for icon
       items: [
+        {
+          type: 'html',
+          value: 'placeholder', // a value is required for the HTML type, but it is not rendered
+          customProps: {
+            tooltipTitle: "This section is new",
+            tooltipContent: "We grouped all the TypeScript-related content into a new section, including configurations, development tips, and guides."
+          }
+        },
         {
           type: 'doc',
           id: 'cms/typescript',
@@ -1002,4 +1063,4 @@ const sidebars = {
   // ]
 };
 
-module.exports = sidebars;
+module.exports = sidebars;

docusaurus/src/components/InfoIcon/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import clsx from 'clsx';
+
+export default function InfoIcon({ tooltip, className }) {
+  if (!tooltip) return null;
+  
+  return (
+    <span className={clsx('info-icon', className)}>
+      <div className="info-icon__tooltip">
+        <div dangerouslySetInnerHTML={{ __html: tooltip }} />
+        <div className="tooltip-arrow"></div>
+      </div>
+    </span>
+  );
+}