Update tooltip (#2421)

* Updated tooltip

frontend/api/index.js

@@ -114,7 +114,9 @@ app.get('/config/project-overrides', (req, res) => {
   let output = values.map(getVariable).join('')
   let dynatrace = ''
   if (process.env.DYNATRACE_URL) {
-    dynatrace=`(function(){function va(){document.cookie="".concat("__dTCookie","=").concat("1",";SameSite=Lax");var ua=-1!==document.cookie.indexOf("__dTCookie");document.cookie="".concat("__dTCookie","=").concat("1","; expires=Thu, 01-Jan-1970 00:00:01 GMT");return ua}function Sa(){return void 0===eb.dialogArguments?navigator.cookieEnabled||va():va()}function fb(){var ua;if(Sa()&&!window.dT_){var kb=(ua={},ua.cfg="app=8e35f25923c61ac7|cors=1|featureHash=A2NVfqru|vcv=2|reportUrl=${process.env.DYNATRACE_URL}/bf|rdnt=1|uxrgce=1|bp=3|cuc=2zmvahr4|mel=100000|dpvc=1|ssv=4|lastModification=1688993944019|tp=500,50,0,1|featureHash=A2NVfqru|agentUri=https://js-cdn.dynatrace.com/jstag/17b5f18726d/ruxitagent_A2NVfqru_10269230615181503.js|auto=|domain=|rid=RID_|rpid=|app=8e35f25923c61ac7",ua.iCE=
+    dynatrace=`
+window.enableDynatrace = true;
+(function(){function va(){document.cookie="".concat("__dTCookie","=").concat("1",";SameSite=Lax");var ua=-1!==document.cookie.indexOf("__dTCookie");document.cookie="".concat("__dTCookie","=").concat("1","; expires=Thu, 01-Jan-1970 00:00:01 GMT");return ua}function Sa(){return void 0===eb.dialogArguments?navigator.cookieEnabled||va():va()}function fb(){var ua;if(Sa()&&!window.dT_){var kb=(ua={},ua.cfg="app=8e35f25923c61ac7|cors=1|featureHash=A2NVfqru|vcv=2|reportUrl=${process.env.DYNATRACE_URL}/bf|rdnt=1|uxrgce=1|bp=3|cuc=2zmvahr4|mel=100000|dpvc=1|ssv=4|lastModification=1688993944019|tp=500,50,0,1|featureHash=A2NVfqru|agentUri=https://js-cdn.dynatrace.com/jstag/17b5f18726d/ruxitagent_A2NVfqru_10269230615181503.js|auto=|domain=|rid=RID_|rpid=|app=8e35f25923c61ac7",ua.iCE=
             Sa,ua);window.dT_=kb}}this.dT_&&dT_.prm&&dT_.prm();var eb="undefined"!==typeof window?window:self,La;eb.dT_?(null===(La=eb.console)||void 0===La?void 0:La.log("Duplicate agent injection detected, turning off redundant initConfig."),eb.dT_.di=1):fb()})();
         (function(){function va(f,n,G){if(G||2===arguments.length)for(var F=0,Z=n.length,Da;F<Z;F++)!Da&&F in n||(Da||(Da=Array.prototype.slice.call(n,0,F)),Da[F]=n[F]);return f.concat(Da||Array.prototype.slice.call(n))}function Sa(f,n,G){void 0===G&&(G=0);var F=-1;n&&(null===f||void 0===f?0:f.indexOf)&&(F=f.indexOf(n,G));return F}function fb(){var f;return!(null===(f=Wa.console)||void 0===f||!f.log)}function eb(f,n){if(!n)return"";var G=f+"=";f=Sa(n,G);if(0>f)return"";for(;0<=f;){if(0===f||" "===n.charAt(f-
             1)||";"===n.charAt(f-1))return G=f+G.length,f=Sa(n,";",f),0<=f?n.substring(G,f):n.substring(G);f=Sa(n,G,f+G.length)}return""}function La(f){return eb(f,document.cookie)}function ua(){}function kb(){var f=0;try{f=Math.round(Wa.performance.timeOrigin)}catch(n){}if(0>=f||isNaN(f)||!isFinite(f)){Ha(Qd,{severity:"Warning",type:"ptoi",text:"performance.timeOrigin is invalid, with a value of [".concat(f,"]. Falling back to performance.timing.navigationStart")});f=0;try{f=Wa.performance.timing.navigationStart}catch(n){}f=

frontend/common/stores/config-store.js

@@ -39,7 +39,7 @@ store.dispatcherIndex = Dispatcher.register(store, (payload) => {
   }
 })
 
-const enableDynatrace = typeof DYNATRACE_URL !== 'undefined' && !!DYNATRACE_URL
+const enableDynatrace = !!window.enableDynatrace
 
 flagsmith
   .init({

frontend/web/components/Toolip.js

@@ -22,7 +22,7 @@ const Tooltip = class extends React.Component {
           type='dark'
           effect='solid'
         >
-          {`<div class="flex-row"><div class="icon--tooltip ion-ios-information-circle pr-2"></div><span>${this.props.children}</span></div>`}
+          {`<div class="flex-row"><div class="icon--tooltip ion-ios-information-circle mr-1"></div><span>${this.props.children}</span></div>`}
         </ReactTooltip>
       </span>
     )

frontend/web/project/api.js

@@ -1,7 +1,7 @@
 import amplitude from 'amplitude-js'
 import data from 'common/data/base/_data'
 
-const enableDynatrace = typeof DYNATRACE_URL !== 'undefined' && !!DYNATRACE_URL
+const enableDynatrace = !!window.enableDynatrace
 
 global.API = {
   ajaxHandler(store, res) {

frontend/web/styles/project/_icons.scss

@@ -3,6 +3,6 @@
         color: $header-color;
     }
     &--tooltip {
-        font-size: 25px;
+        font-size: 16px;
     }
 }

frontend/web/styles/project/_tooltips.scss

@@ -1,11 +1,50 @@
-.__react_component_tooltip {
-    font-family: $font-family-header !important;
-    text-transform: none !important;
+.question-tooltip {
+  .__react_component_tooltip {
+    font-family: $font-family-header;
+    font-size: $font-caption-sm;
+    line-height: $line-height-xxsm;
+    text-transform: none;
+    padding: 5px 8px;
+    border-radius: $border-radius-sm;
+    opacity: 1;
     i {
-        font-style: normal;
-        color:$bt-brand-primary !important;
+      font-style: normal;
+      color: $bt-brand-primary;
     }
-}
-.__react_component_tooltip.type-dark {
-    background-color: $bt-brand-primary-dark;
+    &.type-dark {
+      background-color: $text-icon-dark;
+      &.place-top {
+        &:after {
+          border-top-color: $text-icon-dark;
+          border-right-width: 6px;
+          border-left-width: 6px;
+          margin-left: -6px;
+        }
+      }
+      &.place-bottom {
+        &:after {
+          border-bottom-color: $text-icon-dark;
+          border-right-width: 6px;
+          border-left-width: 6px;
+          margin-left: -6px;
+        }
+      }
+      &.place-right {
+        &:after {
+          border-right-color: $text-icon-dark;
+          border-top-width: 6px;
+          border-bottom-width: 6px;
+          margin-top: -5px;
+        }
+      }
+      &.place-left {
+        &:after {
+          border-left-color: $text-icon-dark;
+          border-top-width: 6px;
+          border-bottom-width: 6px;
+          margin-top: -5px;
+        }
+      }
+    }
+  }
 }