fix: tooltip rendering

shared/vue-ui/src/molecules/BulletCriticity/BulletCriticity.vue

@@ -46,10 +46,17 @@ li {
   font-size: 12px;
   margin-bottom: 17px;
 }
+
 li strong {
+  margin-top: auto;
   margin-left: auto;
   margin-right: 10px;
 }
+
+li svg{
+  margin-top: auto;
+  margin-bottom: 2px;
+}
 .clickable {
   cursor: pointer;
 }

shared/vue-ui/src/molecules/RuleCriticities/RuleCriticities.vue

@@ -44,7 +44,6 @@ const link = computed(() => `${props.link}&tags=${props.metricTag.toLowerCase()}
 .rules-criticities {
   width: 100%;
   height: 100%;
-  border-left: 1px solid #f2f2f2;
-  padding-left: 25px;
+  padding-left: 10px;
 }
 </style>

shared/vue-ui/src/molecules/TooltipBox/TooltipBox.stories.js

@@ -9,28 +9,28 @@ export default {
     anchor: { control: { type: 'boolean' }, required: false, default: false },
     default: { control: { type: 'text' }, required: true },
   },
+}
+
+const Template = (args) => ({
+  components: { TooltipBox },
+  setup() {
+    return { args }
+  },
   template: `
-      <p>
-        The
-        <abbr>
-          HTML
-          <tooltip-box v-bind="args">
-          </tooltip-box>
-        </abbr>
-        abbr element.
-      </p>
+    <p style='text-decoration: underline dashed 1px'>Mouse hover this text to display the tooltip content.</p>
+    <tooltip-box v-bind="args">{{ args.default }}</tooltip-box>
   `,
-}
+});
 
 export const WithAnchor = {
   args: { 
     anchor: true,
     default: "Hyper Text Markup Language"
   }
 }
-
-export const UseParentOnlyAsAnchor = {
-  args: { 
-    default: "Hyper Text Markup Language"
-  },
+ 
+export const UseParentOnlyAsAnchor = Template.bind({});
+UseParentOnlyAsAnchor.args = {
+  default: "Hyper Text Markup Language",
+  anchor: false,
 }

shared/vue-ui/src/molecules/TooltipBox/TooltipBox.vue

@@ -5,20 +5,24 @@
  */
 defineProps({
   anchor: { type: Boolean, required: false, default: false },
+  position: { type: String, required: false, default: 'bottom',
+    validator(value) {
+      return ['top', 'top-left', 'top-right', 'left', 'right', 'bottom' ,'bottom-left', 'bottom-right'].includes(value)
+    }
+  },
 });
 
 </script>
+
 <template>
-  <div 
-    v-if="anchor" 
-    class="anchor"
-  >
-    i
-  </div>
+  <div  v-if="anchor" class="anchor">i</div>
+  <div class="main-anchor"></div>
+
   <div 
     ref="refTooltip"
     inert
     role="tooltip"
+    :class="['pos', position.toLowerCase()]"
   >
     <slot />
   </div>
@@ -32,16 +36,19 @@ defineProps({
   background-color: #4aa9d5;
   width: 13px;
   height: 13px;
+  line-height: 13px;
   color: white;
   font-weight: 500;
-  font-size: smaller;
+  font-size: small;
   float: right;
   margin-left: 5px;
+  margin-top: 3px;
+  cursor: help;
 }
 
 div[role=tooltip] {
 
-  --_p-inline: 1.5ch;
+  --_p-inline: 2.5ch;
   --_p-block: .75ch;
   --_triangle-size: 7px;
   --_shadow-alpha: 50%;
@@ -62,26 +69,24 @@ div[role=tooltip] {
 
   inline-size: max-content;
 
-  max-inline-size: 25ch;
+  max-inline-size: 50ch;
 
   text-align: start;
 
   font-size: 1rem;
 
   font-weight: normal;
-  line-height: normal;
   line-height: initial;
 
   padding: var(--_p-block) var(--_p-inline);
-  margin: 0;
+  margin: 0px 5px 30px 5px;
+
+  border: 1px solid;
   border-radius: 5px;
 
   /* Use System Colors https://developer.mozilla.org/en-US/docs/Web/CSS/system-color */
   color: CanvasText;
   background-color: Canvas;
-
-  border: 1px solid
-
 }
 
 /* create a stacking context for elements with tooltips */
@@ -96,6 +101,47 @@ div[role=tooltip] {
   transition-delay: 200ms;
 }
 
+/* Positionning tooltip around the main-anchor*/
+.main-anchor {
+  anchor-name: --main-anchor;
+}
+
+.pos {
+  position-anchor: --main-anchor;
+}
+
+.top {
+  position-area: y-start;
+}
+
+.top-left {
+  position-area: y-start x-start;
+}
+
+.top-right {
+  position-area: y-start x-end;
+}
+
+.bottom {
+  position-area: y-end;
+}
+
+.bottom-left {
+  position-area: y-end x-start;
+}
+
+.bottom-right {
+  position-area: y-end x-end;
+}
+
+.left {
+  position-area: x-start;
+}
+
+.right {
+  position-area: x-end;
+}
+
 /* prepend some prose for screen readers only */
 div[role="tooltip"]::before {
   content: "; Has tooltip: ";

shared/vue-ui/src/organisms/ScoreBlock/ScoreBlock.vue

@@ -42,14 +42,9 @@ const projectLink = computed(() => {
     <div class="tooltip-calc">
       how my score is calculated ?
       <tooltip-box>
-        <p>
-          <strong>{{ labelLong }} </strong><br>
-          {{ text }}
-        </p>
-        <br>
-        <p>
-          <strong>Identified issues in your app:</strong>
-        </p>
+        <strong>{{ labelLong }}</strong>
+        <br><br>
+        <strong>Identified issues in your app:</strong>
         <rule-criticities
           :minor-severities="minorSeverities"
           :major-severities="majorSeverities"
@@ -67,7 +62,8 @@ const projectLink = computed(() => {
 }
 .tooltip-calc {
   margin-top: 20px;
-  text-decoration: underline;
+  text-decoration: underline dashed 1px;
   display: inline-block;
+  cursor: help;
 }
 </style>

shared/vue-ui/src/organisms/TagCard/TagCard.vue

@@ -35,17 +35,13 @@ const projectLink = computed(() => {
 <template>
   <div class="tag-card">
     <div class="head">
-      <div>
-        <div class="title">
-          <strong>{{ props.metricTag }}</strong>
-        </div>
-        <div>
-          <tooltip-box anchor>
-            Affected rules correspond to the number of rules associated with
-            errors identified by SonarQube, among the Greensight rules that
-            impact this component
-          </tooltip-box>
-        </div>
+      <div class="title">
+        <strong>{{ props.metricTag }}</strong>
+        <tooltip-box anchor>
+          Affected rules correspond to the number of rules associated with
+          errors identified by SonarQube, among the Greensight rules that
+          impact this component
+        </tooltip-box>
       </div>
       <a
         v-if="!noIssues"
@@ -106,8 +102,9 @@ const projectLink = computed(() => {
 .title {
   float: left;
   margin-left: 5px;
+}
+.title strong {
   font-size: 18px;
-  height: 10px;
 }
 .body {
   display: flex;