#12621 dialog tips on click

pandora_console/include/functions_ui.php

@@ -2928,7 +2928,9 @@ function ui_print_help_tip(
         $img = 'images/info@svg.svg';
     }
 
-    $output = '<a href="javascript:" class="tip" style="'.$style.'" >';
+    $id = random_int(1, 99999);
+    $output = '<div id="div_tip_'.$id.'" class="tip" style="'.$style.'" >';
+    $output .= '<div id="tip_dialog_'.$id.'" class="invisible" data-title="'.__('Help').'"><span class="loading-text">'.$text.'</span></div>';
     $output .= html_print_image(
         $img,
         true,
@@ -2939,7 +2941,7 @@ function ui_print_help_tip(
         ],
         false,
         $is_relative && is_metaconsole()
-    ).'</a>';
+    ).'</div>';
 
     if ($return) {
         return $output;

pandora_console/include/javascript/pandora.js

@@ -2450,6 +2450,31 @@ $(document).ready(function() {
       });
     }
   }
+
+  $("[id^='div_tip_']").click(function() {
+    var id = $(this)
+      .attr("id")
+      .split("_")[2];
+
+    $("#tip_dialog_" + id).dialog({
+      title: $("#tip_dialog_" + id).data("title"),
+      modal: true,
+      show: {
+        effect: "fade",
+        duration: 200
+      },
+      hide: {
+        effect: "fade",
+        duration: 200
+      },
+      closeOnEscape: true,
+      buttons: {
+        Close: function() {
+          $(this).dialog("close");
+        }
+      }
+    });
+  });
 });
 
 function close_info_box(id) {

pandora_console/include/styles/pandora.css

@@ -3522,13 +3522,13 @@ span#plugin_description {
  * - TIP (to show help)												-
  * ---------------------------------------------------------------------
  */
-a.tip {
+div.tip {
   display: inline;
   cursor: help;
   margin-left: 10px;
 }
 
-a.tip > img {
+div.tip > img {
   margin-left: 2px;
   margin-right: 2px;
   margin-top: -3px;
@@ -5333,7 +5333,7 @@ input:checked + .p-slider:before {
   width: 100%;
 }
 
-#user_form a.tip img {
+#user_form div.tip img {
   margin-left: 8px;
 }