Change css class name

src/app/search/components/summary.component.html

@@ -5,7 +5,7 @@
     </p>
     <p *ngIf="datasetName && datasetList.length > 0" class="pl-5">{{ getDataset().label }}</p>
     <hr>
-    <p class="text-center font-italic" [tooltip]="summaryCriteria" containerClass="theme-color">
+    <p class="text-center font-italic" [tooltip]="summaryCriteria" containerClass="custom-tooltip">
         Criteria <span class="far fa-question-circle fa-xs"></span>
     </p>
     <p *ngIf="criteriaList.length < 1" class="pl-5 font-weight-bold">
@@ -17,7 +17,7 @@
         </li>
     </ul>
     <hr>
-    <p class="text-center font-italic" [tooltip]="summaryOutputs" containerClass="theme-color" triggers="mouseenter:click">
+    <p class="text-center font-italic" [tooltip]="summaryOutputs" containerClass="custom-tooltip">
         Output <span class="far fa-question-circle fa-xs"></span>
     </p>
     <p *ngIf="outputList.length < 1" class="pl-5 text-danger font-weight-bold">

src/styles.css

@@ -51,17 +51,17 @@
 
 /* tooltip */
 
-.tooltip.theme-color.fade {
+.tooltip.custom-tooltip.fade {
     transition: opacity 1s;
 }
 
-.tooltip.theme-color .tooltip-inner {
+.tooltip.custom-tooltip .tooltip-inner {
     color: #000;
     background-color: #E9ECEF;
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 }
 
-.tooltip.theme-color .tooltip-arrow,
-.tooltip.theme-color .arrow:before {
+.tooltip.custom-tooltip .tooltip-arrow,
+.tooltip.custom-tooltip .arrow:before {
     border-top-color: #E9ECEF;
 }
\ No newline at end of file