Issue #625: Structural changes to tooltip html and css

RotherOSS · Feb 22, 2022 · 1e038d9 · 1e038d9
1 parent a724084
commit 1e038d9
Show file tree

Hide file tree

Showing 15 changed files with 109 additions and 92 deletions.
diff --git a/Kernel/Config/Files/XML/Framework.xml b/Kernel/Config/Files/XML/Framework.xml
@@ -8307,7 +8307,6 @@ via the Preferences button after logging in.
                 <Item>Core.Widget.css</Item>
                 <Item>Core.WidgetMenu.css</Item>
                 <Item>Core.TicketDetail.css</Item>
-                <Item>Core.Tooltip.css</Item>
                 <Item>Core.Dialog.css</Item>
                 <Item>Core.InputFields.css</Item>
                 <Item>Core.Print.css</Item>

diff --git a/Kernel/Output/HTML/Templates/Standard/CustomerTicketMessage.tt b/Kernel/Output/HTML/Templates/Standard/CustomerTicketMessage.tt
@@ -32,9 +32,11 @@
                         [% Data.Field %]
                     </div>
                     [% IF Data.Tooltip %]
-                        <div class="Tooltip">
+                        <div class="oooTooltip">
                             <i class="ooofo ooofo-help"></i>
-                            <p>[% Data.Tooltip | html | html_line_break %]</p>
+                            <div class="Content">
+                                <p>[% Data.Tooltip | html | html_line_break %]</p>
+                            </div>
                         </div>
                     [% END %]
                     [% Data.Label %]
@@ -103,9 +105,11 @@
                         [% Data.Field %]
                     </div>
                     [% IF Data.Tooltip %]
-                        <div class="Tooltip">
+                        <div class="oooTooltip">
                             <i class="ooofo ooofo-help"></i>
-                            <p>[% Data.Tooltip | html | html_line_break %]</p>
+                            <div class="Content">
+                                <p>[% Data.Tooltip | html | html_line_break %]</p>
+                            </div>
                         </div>
                     [% END %]
                     [% Data.Label %]
@@ -119,9 +123,11 @@
                         [% Data.Field %]
                     </div>
                     [% IF Data.Tooltip %]
-                        <div class="Tooltip">
+                        <div class="oooTooltip">
                             <i class="ooofo ooofo-help"></i>
-                            <p>[% Data.Tooltip | html | html_line_break %]</p>
+                            <div class="Content">
+                                <p>[% Data.Tooltip | html | html_line_break %]</p>
+                            </div>
                         </div>
                     [% END %]
                     [% Data.Label %]
@@ -135,9 +141,11 @@
                         [% Data.Field %]
                     </div>
                     [% IF Data.Tooltip %]
-                        <div class="Tooltip">
+                        <div class="oooTooltip">
                             <i class="ooofo ooofo-help"></i>
-                            <p>[% Data.Tooltip | html | html_line_break %]</p>
+                            <div class="Content">
+                                <p>[% Data.Tooltip | html | html_line_break %]</p>
+                            </div>
                         </div>
                     [% END %]
                     [% Data.Label %]
@@ -204,9 +212,11 @@
 #                        [% Data.Field %]
 #                    </div>
 #                    [% IF Data.Tooltip %]
-#                        <div class="Tooltip">
+#                        <div class="oooTooltip">
 #                            <i class="ooofo ooofo-help"></i>
-#                            <p>[% Data.Tooltip | html %]</p>
+#                            <div class="Content">
+#                               <p>[% Data.Tooltip | html %]</p>
+#                            </div>
 #                        </div>
 #                    [% END %]
 #                    [% Data.Label %]
@@ -219,9 +229,11 @@
 #                        [% Data.Field %]
 #                    </div>
 #                    [% IF Data.Tooltip %]
-#                        <div class="Tooltip">
+#                        <div class="oooTooltip">
 #                            <i class="ooofo ooofo-help"></i>
-#                            <p>[% Data.Tooltip | html %]</p>
+#                            <div class="Content>
+#                               <p>[% Data.Tooltip | html %]</p>
+#                            </div>
 #                        </div>
 #                    [% END %]
 #                    [% Data.Label %]

diff --git a/Kernel/Output/HTML/Templates/Standard/CustomerTicketZoom.tt b/Kernel/Output/HTML/Templates/Standard/CustomerTicketZoom.tt
@@ -75,9 +75,11 @@
                         [% Data.Field %]
                     </div>
                     [% IF Data.Tooltip %]
-                        <div class="Tooltip">
+                        <div class="oooTooltip">
                             <i class="ooofo ooofo-help"></i>
-                            <p>[% Data.Tooltip | html | html_line_break %]</p>
+                            <div class="Content">
+                                <p>[% Data.Tooltip | html | html_line_break %]</p>
+                            </div>
                         </div>
                     [% END %]
                     [% Data.Label %]
@@ -121,9 +123,11 @@
                         [% Data.Field %]
                     </div>
                     [% IF Data.Tooltip %]
-                        <div class="Tooltip">
+                        <div class="oooTooltip">
                             <i class="ooofo ooofo-help"></i>
-                            <p>[% Data.Tooltip | html | html_line_break %]</p>
+                            <div class="Content">
+                                <p>[% Data.Tooltip | html | html_line_break %]</p>
+                            </div>
                         </div>
                     [% END %]
                     [% Data.Label %]
@@ -148,9 +152,11 @@
                         [% Data.Field %]
                     </div>
                     [% IF Data.Tooltip %]
-                        <div class="Tooltip">
+                        <div class="oooTooltip">
                             <i class="ooofo ooofo-help"></i>
-                            <p>[% Data.Tooltip | html | html_line_break %]</p>
+                            <div class="Content">
+                                <p>[% Data.Tooltip | html | html_line_break %]</p>
+                            </div>
                         </div>
                     [% END %]
                     [% Data.Label %]
@@ -164,9 +170,11 @@
                         [% Data.Field %]
                     </div>
                     [% IF Data.Tooltip %]
-                        <div class="Tooltip">
+                        <div class="oooTooltip">
                             <i class="ooofo ooofo-help"></i>
-                            <p>[% Data.Tooltip | html | html_line_break %]</p>
+                            <div class="Content">
+                                <p>[% Data.Tooltip | html | html_line_break %]</p>
+                            </div>
                         </div>
                     [% END %]
                     [% Data.Label %]
@@ -183,9 +191,11 @@
 #                        [% Data.Field %]
 #                    </div>
 #                    [% IF Data.Tooltip %]
-#                        <div class="Tooltip">
+#                        <div class="oooTooltip">
 #                            <i class="ooofo ooofo-help"></i>
-#                            <p>[% Data.Tooltip | html | html_line_break %]</p>
+#                            <div class="Content">
+#                               <p>[% Data.Tooltip | html | html_line_break %]</p>
+#                            </div>
 #                        </div>
 #                    [% END %]
 #                    [% Data.Label %]
@@ -198,9 +208,11 @@
 #                        [% Data.Field %]
 #                    </div>
 #                    [% IF Data.Tooltip %]
-#                        <div class="Tooltip">
+#                        <div class="oooTooltip">
 #                            <i class="ooofo ooofo-help"></i>
-#                            <p>[% Data.Tooltip | html | html_line_break %]</p>
+#                            <div class="Content">
+#                               <p>[% Data.Tooltip | html | html_line_break %]</p>
+#                            </div>
 #                        </div>
 #                    [% END %]
 #                    [% Data.Label %]

diff --git a/Kernel/Output/HTML/Templates/Standard/ProcessManagement/CustomerArticle.tt b/Kernel/Output/HTML/Templates/Standard/ProcessManagement/CustomerArticle.tt
@@ -19,9 +19,11 @@
         <input type="text" id="Subject[% Data.IDSuffix | html %]" name="Subject" value="[% Data.Subject | html %]" class="W75pc [% Data.ValidateRequired | html %] [% Data.SubjectServerError | html %] Validate_DependingRequiredAND Validate_Depending_RichText Validate_Depending_AttachmentExists Validate_Depending_TimeUnits"/>
     </div>
 [% RenderBlockStart("rw:Article:DescriptionLong") %]
-    <div class="Tooltip">
+    <div class="oooTooltip">
         <i class="ooofo ooofo-help"></i>
-        <p>[% Translate(Data.DescriptionLong) | html | html_line_break %]</p>
+        <div class="Content">
+            <p>[% Translate(Data.DescriptionLong) | html | html_line_break %]</p>
+        </div>
     </div>
 [% RenderBlockEnd("rw:Article:DescriptionLong") %]
     <label class="[% Data.MandatoryClass | html %]" for="Subject">

diff --git a/Kernel/Output/HTML/Templates/Standard/ProcessManagement/CustomerDynamicField.tt b/Kernel/Output/HTML/Templates/Standard/ProcessManagement/CustomerDynamicField.tt
@@ -20,9 +20,11 @@
         [% Data.Content %]
     </div>
 [% RenderBlockStart("rw:DynamicField:DescriptionLong") %]
-    <div class="Tooltip">
+    <div class="oooTooltip">
         <i class="ooofo ooofo-help"></i>
-        <p>[% Translate(Data.DescriptionLong) | html | html_line_break %]</p>
+        <div class="Content">
+            <p>[% Translate(Data.DescriptionLong) | html | html_line_break %]</p>
+        </div>
     </div>
 [% RenderBlockEnd("rw:DynamicField:DescriptionLong") %]
     [% Data.Label %]

diff --git a/Kernel/Output/HTML/Templates/Standard/ProcessManagement/CustomerPriority.tt b/Kernel/Output/HTML/Templates/Standard/ProcessManagement/CustomerPriority.tt
@@ -19,9 +19,11 @@
         [% Data.Content %]
     </div>
 [% RenderBlockStart("rw:Priority:DescriptionLong") %]
-    <div class="Tooltip">
+    <div class="oooTooltip">
         <i class="ooofo ooofo-help"></i>
-        <p>[% Translate(Data.DescriptionLong) | html | html_line_break %]</p>
+        <div class="Content">
+            <p>[% Translate(Data.DescriptionLong) | html | html_line_break %]</p>
+        </div>
     </div>
 [% RenderBlockEnd("rw:Priority:DescriptionLong") %]
     <label for="[% Data.FieldID | html %][% Data.IDSuffix | html %]" class="[% Data.MandatoryClass | html %]">

diff --git a/Kernel/Output/HTML/Templates/Standard/ProcessManagement/CustomerQueue.tt b/Kernel/Output/HTML/Templates/Standard/ProcessManagement/CustomerQueue.tt
@@ -19,9 +19,11 @@
         [% Data.Content %]
     </div>
 [% RenderBlockStart("rw:Queue:DescriptionLong") %]
-    <div class="Tooltip">
+    <div class="oooTooltip">
         <i class="ooofo ooofo-help"></i>
-        <p>[% Translate(Data.DescriptionLong) | html | html_line_break %]</p>
+        <div class="Content">
+            <p>[% Translate(Data.DescriptionLong) | html | html_line_break %]</p>
+        </div>
     </div>
 [% RenderBlockEnd("rw:Queue:DescriptionLong") %]
     <label for="[% Data.FieldID | html %][% Data.IDSuffix | html %]" class="[% Data.MandatoryClass | html %]">

diff --git a/Kernel/Output/HTML/Templates/Standard/ProcessManagement/CustomerSLA.tt b/Kernel/Output/HTML/Templates/Standard/ProcessManagement/CustomerSLA.tt
@@ -19,9 +19,11 @@
         [% Data.Content %]
     </div>
 [% RenderBlockStart("rw:SLA:DescriptionLong") %]
-    <div class="Tooltip">
+    <div class="oooTooltip">
         <i class="ooofo ooofo-help"></i>
-        <p>[% Translate(Data.DescriptionLong) | html | html_line_break %]</p>
+        <div class="Content">
+            <p>[% Translate(Data.DescriptionLong) | html | html_line_break %]</p>
+        </div>
     </div>
 [% RenderBlockEnd("rw:SLA:DescriptionLong") %]
     <label for="[% Data.FieldID | html %][% Data.IDSuffix | html %]" class="[% Data.MandatoryClass | html %]">

diff --git a/Kernel/Output/HTML/Templates/Standard/ProcessManagement/CustomerService.tt b/Kernel/Output/HTML/Templates/Standard/ProcessManagement/CustomerService.tt
@@ -19,9 +19,11 @@
         [% Data.Content %]
     </div>
 [% RenderBlockStart("rw:Service:DescriptionLong") %]
-    <div class="Tooltip">
+    <div class="oooTooltip">
         <i class="ooofo ooofo-help"></i>
-        <p>[% Translate(Data.DescriptionLong) | html | html_line_break %]</p>
+        <div class="Content">
+            <p>[% Translate(Data.DescriptionLong) | html | html_line_break %]</p>
+        </div>
     </div>
 [% RenderBlockEnd("rw:Service:DescriptionLong") %]
     <label for="[% Data.FieldID | html %][% Data.IDSuffix | html %]" class="[% Data.MandatoryClass | html %]">

diff --git a/Kernel/Output/HTML/Templates/Standard/ProcessManagement/CustomerState.tt b/Kernel/Output/HTML/Templates/Standard/ProcessManagement/CustomerState.tt
@@ -19,9 +19,11 @@
         [% Data.Content %]
     </div>
 [% RenderBlockStart("rw:State:DescriptionLong") %]
-    <div class="Tooltip">
+    <div class="oooTooltip">
         <i class="ooofo ooofo-help"></i>
-        <p>[% Translate(Data.DescriptionLong) | html | html_line_break %]</p>
+        <div class="Content">
+            <p>[% Translate(Data.DescriptionLong) | html | html_line_break %]</p>
+        </div>
     </div>
 [% RenderBlockEnd("rw:State:DescriptionLong") %]
     <label for="[% Data.FieldID | html %][% Data.IDSuffix | html %]" class="[% Data.MandatoryClass | html %]">

diff --git a/Kernel/Output/HTML/Templates/Standard/ProcessManagement/CustomerTitle.tt b/Kernel/Output/HTML/Templates/Standard/ProcessManagement/CustomerTitle.tt
@@ -19,9 +19,11 @@
         <input class="W50pc DynamicFieldText [% Data.ValidateRequired | html %] [% Data.ServerError | html %]" type="text" name="[% Data.FieldID | html %]" id="[% Data.FieldID | html %][% Data.IDSuffix | html %]" value="[% Data.Value | html %]"/>
     </div>
 [% RenderBlockStart("rw:Title:DescriptionLong") %]
-    <div class="Tooltip">
+    <div class="oooTooltip">
         <i class="ooofo ooofo-help"></i>
-        <p>[% Translate(Data.DescriptionLong) | html | html_line_break %]</p>
+        <div class="Content">
+           <p>[% Translate(Data.DescriptionLong) | html | html_line_break %]</p>
+        </div>
     </div>
 [% RenderBlockEnd("rw:Title:DescriptionLong") %]
     <label for="[% Data.FieldID | html %][% Data.IDSuffix | html %]" class="[% Data.MandatoryClass | html %]">

diff --git a/Kernel/Output/HTML/Templates/Standard/ProcessManagement/CustomerType.tt b/Kernel/Output/HTML/Templates/Standard/ProcessManagement/CustomerType.tt
@@ -19,9 +19,11 @@
         [% Data.Content %]
     </div>
 [% RenderBlockStart("rw:Type:DescriptionLong") %]
-    <div class="Tooltip">
+    <div class="oooTooltip">
         <i class="ooofo ooofo-help"></i>
-        <p>[% Translate(Data.DescriptionLong) | html | html_line_break %]</p>
+        <div class="Content">
+            <p>[% Translate(Data.DescriptionLong) | html | html_line_break %]</p>
+        </div>
     </div>
 [% RenderBlockEnd("rw:Type:DescriptionLong") %]
     <label for="[% Data.FieldID | html %][% Data.IDSuffix | html %]" class="[% Data.MandatoryClass | html %]">

diff --git a/var/httpd/htdocs/js/Core.Form.ErrorTooltips.js b/var/httpd/htdocs/js/Core.Form.ErrorTooltips.js
@@ -157,7 +157,7 @@ Core.Form.ErrorTooltips = (function (TargetNS) {
             .show();
 
         if ( Core.Config.Get('SessionName') === Core.Config.Get('CustomerPanelSessionName') ) {
-            TooltipOffsetLeft = 96;
+            TooltipOffsetLeft = 48;
             TooltipOffsetTop = 24;
         }
 

diff --git a/var/httpd/htdocs/skins/Customer/default/css/Core.InputFields.css b/var/httpd/htdocs/skins/Customer/default/css/Core.InputFields.css
@@ -541,7 +541,7 @@ input[readonly=readonly] {
 }
 
 /* Tooltips */
-.Tooltip {
+.oooTooltip {
     display: inline-block;
     width: 18px;
     height: 18px;
@@ -557,11 +557,11 @@ input[readonly=readonly] {
     left: -48px;
 }
 
-.Tooltip i {
+.oooToolip i {
     font-size: 18px;
 }
 
-.Tooltip > p {
+.oooTooltip > .Content {
     z-index: 1;
     display: none;
     padding: 24px 32px;
@@ -576,13 +576,33 @@ input[readonly=readonly] {
     border-radius: 15px;
 }
 
-.Tooltip:hover > p {
+.oooTooltip:hover > .Content {
     display: inline;
     position: absolute;
     left: -260px;
     top: -8px;
 }
 
+.TooltipContainer {
+    position: absolute;
+    z-index: 6000;
+    display: none;
+    max-width: 400px;
+}
+
+.Tooltip > .Content {
+    background-color: #fff;
+    padding: 5px;
+    position: relative;
+    border-radius: 15px;
+    padding: 24px 32px;
+    max-width: 280px;
+    line-height: 1.4;
+    white-space: normal;
+    box-shadow: 0 1px 4px 0 rgba(4, 0, 71, 0.16);
+    box-shadow: 0 1px 4px 0 var(--colShadowDark);
+}
+
 /* jstree stuff */
 
 .jstree-node > .jstree-wholerow {