feat(ui): put description of ui elements in tooltip

Author: maximehuran

assets/css/app.scss

@@ -194,6 +194,17 @@ html.is-disabled body {
     padding-top: 1.5rem !important;
 }
 
+.uie-card .header {
+    display: flex !important;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 10px;
+}
+
+.uie-card .header .button {
+    align-self: flex-start;
+}
+
 .is-active .uie-heading {
     transform: rotate(90deg) translateY(-0.6rem) scale(0.7);
     transform-origin: left top 0;

src/Resources/public/css/rich-editor.css

@@ -116,12 +116,14 @@
 <div class="ui link card uie-card js-uie-new">
     <div class="content left aligned">
         <div class="header">
-            <i class="{{icon}} icon"></i>
-            {{title}}
-        </div>
-        <div class="description">
+            <div>
+                <i class="{{icon}} icon"></i>
+                {{title}}
+            </div>
             {{#description}}
-            {{description}}
+            <div class="mini ui basic icon button" data-tooltip="{{description}}" data-inverted="" data-position="bottom center">
+                <i class="question icon"></i>
+            </div>
             {{/description}}
         </div>
         {{#wireframe}}