tables with nicer styling

results.html

@@ -97,26 +97,26 @@
                   </tr>
                   <tr>
                     <th>Dataset</th>
-                    <th class="has-text-centered tooltip-trigger column-border-left" data-title="FiNER-Open Research Dataset" data-tooltip="FiNER-Open Research Dataset: A manually annotated dataset for financial named entity recognition, containing 47,851 financial news articles with annotations for person, location, and organization entities.">FiNER</th>
-                    <th class="has-text-centered tooltip-trigger" data-title="FinRED" data-tooltip="FinRED: A specialized relation extraction dataset for the financial domain, created from financial news and earnings call transcripts, with financial relations mapped using distance supervision based on Wikidata triplets.">FR</th>
-                    <th class="has-text-centered tooltip-trigger" data-title="FinEntity" data-tooltip="FinEntity: Dataset for financial entity recognition and entity linking from diverse financial documents. Features 5,554 entity annotations with company, person, and product types linked to a knowledge base.">FE</th>
-                    <th class="has-text-centered tooltip-trigger" data-title="ReFINED" data-tooltip="ReFINED: Information retrieval and extraction benchmark spanning financial domains, derived from datasets including FiQA, CoFiF, ConvFinQA, and SemEval tasks with 10,700+ pairs of queries and relevant documents.">RF</th>
-                    <th class="has-text-centered tooltip-trigger column-border-left" data-title="FiQA Task 1" data-tooltip="FiQA Task 1 focuses on aspect-based financial sentiment analysis. Given a financial text, such as microblog posts or news headlines, systems predict sentiment scores on a continuous scale from -1 (negative) to 1 (positive). Evaluation metrics include MSE, MAE, and R-squared.">FQ1</th>
-                    <th class="has-text-centered tooltip-trigger column-border-left" data-tooltip="Financial Phrase Bank contains 4,840 sentences from English-language financial news articles, categorized as positive, negative, or neutral. Each sentence reflects the sentiment an investor might perceive regarding its influence on stock prices. Annotated by 16 finance experts using majority voting.">FPB</th>
-                    <th class="has-text-centered tooltip-trigger" data-tooltip="Manually-annotated dataset focusing on subjectivity in Earnings Call Transcripts QA sessions. Includes 49,446 annotations across 2,747 QA pairs labeled on six subjectivity features: Assertive, Cautious, Optimistic, Specific, Clear, and Relevant.">SQA</th>
-                    <th class="has-text-centered tooltip-trigger" data-tooltip="Expert-annotated dataset of financial corpora with sentiment labels from ratings agencies and news publishers. Contains 10K+ positive/negative texts and 1K neutral samples.">FNXL</th>
-                    <th class="has-text-centered tooltip-trigger column-border-left" data-tooltip="For text sections identified as causal, this task extracts the Cause and Effect spans, handling both unicausal and multicausal cases in financial texts.">CD</th>
-                    <th class="has-text-centered tooltip-trigger" data-tooltip="Determines if a given financial text section contains a causal relation, labeled as 1 if causal and 0 otherwise.">CC</th>
-                    <th class="has-text-centered tooltip-trigger column-border-left" data-title="Banking77" data-tooltip="A fine-grained dataset designed for intent detection within the banking domain, comprising 13,083 customer service queries annotated with 77 unique intents.">Bank77</th>
-                    <th class="has-text-centered tooltip-trigger" data-title="FinBench" data-tooltip="A dataset designed to evaluate machine learning models using tabular data and profile text inputs for financial risk prediction, covering default, fraud, and churn with 333,000 labeled instances.">FBench</th>
-                    <th class="has-text-centered tooltip-trigger" data-tooltip="A dataset of Federal Open Market Committee speeches, meeting minutes, and press conference transcripts (1996-2022) for hawkish-dovish classification of monetary policy stance.">FOMC</th>
-                    <th class="has-text-centered tooltip-trigger" data-tooltip="An expert-annotated dataset for detecting fine-grained investor claims within financial narratives, focusing on numerals in analyst reports and earnings call transcripts.">NumC</th>
-                    <th class="has-text-centered tooltip-trigger tooltip-right" data-tooltip="A dataset of 11,412 human-annotated financial news headlines focused on commodities (particularly gold), spanning 2000-2019, with binary indicators for price mentions and movements.">Headlines</th>
-                    <th class="has-text-centered tooltip-trigger column-border-left" data-tooltip="Large-scale dataset for numerical reasoning over financial data, consisting of 8,281 question-answer pairs from financial reports. Focuses on questions requiring interpretation of financial data and multi-step reasoning. Licensed under CC BY-NC 4.0.">FinQA</th>
-                    <th class="has-text-centered tooltip-trigger tooltip-right" data-tooltip="Multi-turn question answering dataset with 3,892 conversations and 14,115 questions exploring chains of numerical reasoning in financial dialogues. Released under MIT License.">ConvFQA</th>
-                    <th class="has-text-centered tooltip-trigger tooltip-right" data-tooltip="Large-scale QA dataset for hybrid data sources (tables and text) from financial reports, emphasizing numerical reasoning operations. Licensed under CC BY 4.0.">TaTQA</th>
-                    <th class="has-text-centered tooltip-trigger tooltip-right column-border-left" data-title="ECTSum" data-tooltip="A dataset focused on extractive summarization of earnings call transcripts, containing 2,425 transcripts from investor calls. Each instance includes a transcript, company name, and the ground truth summary. The data spans diverse sectors from S&P 500 companies.">EarCall</th>
-                    <th class="has-text-centered tooltip-trigger tooltip-right" data-tooltip="A dataset comprising 4,750 financial disclosures from 10-K or 10-Q filings of public companies. Each entry contains a company name, filing date, source domain, and disclosure text with its expert-crafted abstract.">FinD</th>
+                    <th class="has-text-centered tooltip-trigger column-border-left" data-title="FiNER-Open Research Dataset" data-tooltip="FiNER-Open Research Dataset: A manually annotated dataset for financial named entity recognition, containing 47,851 financial news articles with annotations for person, location, and organization entities.">FiNER<span class="metric-label">F1</span></th>
+                    <th class="has-text-centered tooltip-trigger" data-title="FinRED" data-tooltip="FinRED: A specialized relation extraction dataset for the financial domain, created from financial news and earnings call transcripts, with financial relations mapped using distance supervision based on Wikidata triplets.">FR<span class="metric-label">F1</span></th>
+                    <th class="has-text-centered tooltip-trigger" data-title="FinEntity" data-tooltip="FinEntity: Dataset for financial entity recognition and entity linking from diverse financial documents. Features 5,554 entity annotations with company, person, and product types linked to a knowledge base.">FE<span class="metric-label">Acc</span></th>
+                    <th class="has-text-centered tooltip-trigger" data-title="ReFINED" data-tooltip="ReFINED: Information retrieval and extraction benchmark spanning financial domains, derived from datasets including FiQA, CoFiF, ConvFinQA, and SemEval tasks with 10,700+ pairs of queries and relevant documents.">RF<span class="metric-label">MAP</span></th>
+                    <th class="has-text-centered tooltip-trigger column-border-left" data-title="FiQA Task 1" data-tooltip="FiQA Task 1 focuses on aspect-based financial sentiment analysis. Given a financial text, such as microblog posts or news headlines, systems predict sentiment scores on a continuous scale from -1 (negative) to 1 (positive). Evaluation metrics include MSE, MAE, and R-squared.">FQ1<span class="metric-label">MSE</span></th>
+                    <th class="has-text-centered tooltip-trigger column-border-left" data-tooltip="Financial Phrase Bank contains 4,840 sentences from English-language financial news articles, categorized as positive, negative, or neutral. Each sentence reflects the sentiment an investor might perceive regarding its influence on stock prices. Annotated by 16 finance experts using majority voting.">FPB<span class="metric-label">F1</span></th>
+                    <th class="has-text-centered tooltip-trigger" data-tooltip="Manually-annotated dataset focusing on subjectivity in Earnings Call Transcripts QA sessions. Includes 49,446 annotations across 2,747 QA pairs labeled on six subjectivity features: Assertive, Cautious, Optimistic, Specific, Clear, and Relevant.">SQA<span class="metric-label">F1</span></th>
+                    <th class="has-text-centered tooltip-trigger" data-tooltip="Expert-annotated dataset of financial corpora with sentiment labels from ratings agencies and news publishers. Contains 10K+ positive/negative texts and 1K neutral samples.">FNXL<span class="metric-label">Acc</span></th>
+                    <th class="has-text-centered tooltip-trigger column-border-left" data-tooltip="For text sections identified as causal, this task extracts the Cause and Effect spans, handling both unicausal and multicausal cases in financial texts.">CD<span class="metric-label">F1</span></th>
+                    <th class="has-text-centered tooltip-trigger" data-tooltip="Determines if a given financial text section contains a causal relation, labeled as 1 if causal and 0 otherwise.">CC<span class="metric-label">F1</span></th>
+                    <th class="has-text-centered tooltip-trigger column-border-left" data-title="Banking77" data-tooltip="A fine-grained dataset designed for intent detection within the banking domain, comprising 13,083 customer service queries annotated with 77 unique intents.">Bank77<span class="metric-label">Acc</span></th>
+                    <th class="has-text-centered tooltip-trigger" data-title="FinBench" data-tooltip="A dataset designed to evaluate machine learning models using tabular data and profile text inputs for financial risk prediction, covering default, fraud, and churn with 333,000 labeled instances.">FBench<span class="metric-label">F1</span></th>
+                    <th class="has-text-centered tooltip-trigger" data-tooltip="A dataset of Federal Open Market Committee speeches, meeting minutes, and press conference transcripts (1996-2022) for hawkish-dovish classification of monetary policy stance.">FOMC<span class="metric-label">F1</span></th>
+                    <th class="has-text-centered tooltip-trigger" data-tooltip="An expert-annotated dataset for detecting fine-grained investor claims within financial narratives, focusing on numerals in analyst reports and earnings call transcripts.">NumC<span class="metric-label">Acc</span></th>
+                    <th class="has-text-centered tooltip-trigger tooltip-right" data-tooltip="A dataset of 11,412 human-annotated financial news headlines focused on commodities (particularly gold), spanning 2000-2019, with binary indicators for price mentions and movements.">Headlines<span class="metric-label">F1</span></th>
+                    <th class="has-text-centered tooltip-trigger column-border-left" data-tooltip="Large-scale dataset for numerical reasoning over financial data, consisting of 8,281 question-answer pairs from financial reports. Focuses on questions requiring interpretation of financial data and multi-step reasoning. Licensed under CC BY-NC 4.0.">FinQA<span class="metric-label">Acc</span></th>
+                    <th class="has-text-centered tooltip-trigger tooltip-right" data-tooltip="Multi-turn question answering dataset with 3,892 conversations and 14,115 questions exploring chains of numerical reasoning in financial dialogues. Released under MIT License.">ConvFQA<span class="metric-label">EM</span></th>
+                    <th class="has-text-centered tooltip-trigger tooltip-right" data-tooltip="Large-scale QA dataset for hybrid data sources (tables and text) from financial reports, emphasizing numerical reasoning operations. Licensed under CC BY 4.0.">TaTQA<span class="metric-label">EM</span></th>
+                    <th class="has-text-centered tooltip-trigger tooltip-right column-border-left" data-title="ECTSum" data-tooltip="A dataset focused on extractive summarization of earnings call transcripts, containing 2,425 transcripts from investor calls. Each instance includes a transcript, company name, and the ground truth summary. The data spans diverse sectors from S&P 500 companies.">EarCall<span class="metric-label">ROUGE</span></th>
+                    <th class="has-text-centered tooltip-trigger tooltip-right" data-tooltip="A dataset comprising 4,750 financial disclosures from 10-K or 10-Q filings of public companies. Each entry contains a company name, filing date, source domain, and disclosure text with its expert-crafted abstract.">FinD<span class="metric-label">ROUGE</span></th>
                   </tr>
                 </thead>
                 <tbody>
@@ -2400,5 +2400,6 @@
   <script src="static/js/results.js"></script>
   <script src="static/js/tooltips.js"></script>
   <script src="static/js/fixed-tooltips.js"></script>
+  <script src="static/js/tooltip-fix.js"></script>
 </body>
 </html>

static/css/results.css

@@ -9,13 +9,44 @@
 }
 .results-table {
   width: 100%;
-  overflow-x: auto;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+.results-table th,
+.results-table td {
+  text-align: center;
+  padding: 0.4rem 0.2rem;
+  vertical-align: middle;
+  width: 50px;
+  max-width: 50px;
+  font-size: 0.75rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.results-table th {
+  background-color: #e0e0e0;
+  color: #333;
+  font-weight: 600;
+  position: sticky;
+  top: 0;
+  text-align: center;
+}
+.results-table tr:nth-child(even) {
+  background-color: #f0f6ff;
+}
+.results-table tr:hover {
+  background-color: #e5eeff;
 }
 .table-container {
-  padding: 1.5rem;
+  padding: 0.75rem;
   background-color: white;
   border-radius: 6px;
-  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
+  box-shadow: 0 4px 6px rgba(10, 10, 10, 0.15);
+  margin-bottom: 2rem;
+  font-size: 0.9rem;
+  max-width: 100%;
+  overflow-x: auto;
 }
 .results-title {
   margin-bottom: 1.5rem;
@@ -58,12 +89,27 @@ body {
   pointer-events: none;
 }
 
+.tooltip-trigger::after {
+  display: none;
+}
+
+.tooltip-trigger:hover::after {
+  display: block;
+}
+
 .tooltip-trigger:hover::first-line {
   font-weight: bold;
   font-size: 0.95rem;
   text-decoration: underline;
 }
 
+.tooltip-trigger .first-line,
+.tooltip-trigger::first-line {
+  font-weight: normal;
+  font-size: inherit;
+  text-decoration: none;
+}
+
 /* Add a class for manually marking right-aligned tooltips */
 .tooltip-right:hover::after {
   left: auto !important;
@@ -74,37 +120,100 @@ body {
 
 /* Table borders */
 .column-border-right {
-  border-right: 2px solid #dbdbdb;
+  border-right: 2px solid #b8d3ff;
 }
 .column-border-left {
-  border-left: 2px solid #ccc;
+  border-left: 2px solid #b8d3ff;
 }
 .row-border-bottom {
-  border-bottom: 2px solid #999;
+  border-bottom: 2px solid #004d99;
+}
+
+/* Metric labels in headers */
+.metric-label {
+  display: block;
+  font-size: 0.65rem;
+  font-weight: normal;
+  margin-top: 0.1rem;
+  font-style: italic;
+  opacity: 0.75;
+}
+/* Model name column styling */
+.results-table td:first-child {
+  font-weight: 600;
+  text-align: left;
+  background-color: #f8f9fa;
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  box-shadow: 2px 0 5px rgba(0,0,0,0.05);
+  /* width: 110px; */
+  /* max-width: 110px; */
+  /* min-width: 110px; */
+}
+
+/* Adjust column widths for task groups */
+.results-table th[colspan="4"], 
+.results-table th[colspan="3"], 
+.results-table th[colspan="5"],
+.results-table th[colspan="2"] {
+  min-width: auto;
+}
+
+/* Fix for text classification tables */
+/* .results-table th[colspan="4"] {
+  width: 220px;
+  max-width: 220px;
+}
+
+.results-table th[colspan="1"] {
+  width: 60px;
+  max-width: 60px;
+} */
+
+/* Ensure model column in all tabs has enough width */
+.results-table th:first-child {
+  /* width: 110px; */
+  min-width: 110px;
+  /* max-width: 110px; */
+  text-align: left;
 }
 
 /* Performance highlighting colors */
 .performance-best {
-  background-color: #48c774 !important;
+  background-color: #1f93ff !important;
+  color: white !important;
+  font-weight: bold !important;
 }
 .performance-strong {
-  background-color: #b5f2c3 !important;
+  background-color: #70b7ff !important;
+  color: #003366 !important;
+  font-weight: 600 !important;
 }
 .performance-medium {
-  background-color: #b5f2c3 !important;  /* Same as strong for consistency */
+  background-color: #a8d1ff !important;
+  color: #003366 !important;
 }
 .performance-low {
-  background-color: #ebffef !important;
+  background-color: #e1efff !important;
 }
 
 /* Legend styles */
 .performance-legend {
-  margin-top: 1rem;
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
 }
 .performance-legend-item {
-  display: inline-block;
-  padding: 0 0.5rem;
-  margin-right: 0.5rem;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  margin: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 }
 
 /* Responsive tooltip positioning */
@@ -119,4 +228,14 @@ body {
     margin-right: 0;
     margin-top: 5px;
   }
-}
+}@media (min-width: 768px) { 
+  .container { 
+    max-width: 1500px !important; 
+  } 
+}
+
+/* Add line breaks to longer model names */
+.results-table td:first-child {
+  word-break: break-word;
+  hyphens: auto;
+}

static/css/tooltips.css

@@ -7,7 +7,7 @@ th[data-tooltip]:hover::after {
 
 /* Custom tooltips created by JS */
 .custom-tooltip {
-  position: fixed;
+  position: absolute;
   z-index: 9999;
   background-color: rgba(0, 0, 0, 0.9);
   color: white;
@@ -20,6 +20,7 @@ th[data-tooltip]:hover::after {
   text-align: left;
   pointer-events: none;
   word-wrap: break-word;
+  transition: opacity 0.2s ease-in-out;
 }
 
 .custom-tooltip strong {

static/js/fixed-tooltips.js

@@ -0,0 +1,117 @@
+document.addEventListener('DOMContentLoaded', function() {
+  // Fix table column widths
+  function fixTableColumnWidths() {
+    const tables = document.querySelectorAll('.results-table table');
+    
+    tables.forEach(table => {
+      // Force table layout to fixed
+      table.style.tableLayout = 'fixed';
+      
+      // Get all the dataset header cells
+      const datasetHeaders = table.querySelectorAll('thead tr:first-child th:not(:first-child)');
+      
+      // Set dataset column titles to have no width impact
+      datasetHeaders.forEach(header => {
+        // Remove any explicit width
+        header.style.width = 'auto';
+        
+        // Create a wrapper for the text that won't affect layout
+        if (!header.querySelector('.tooltip-text-wrapper')) {
+          const textContent = header.textContent;
+          header.innerHTML = `<span class="tooltip-text-wrapper" style="display:inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${header.innerHTML}</span>`;
+        }
+        
+        // Force all tooltips to be positioned absolute or fixed
+        if (header.hasAttribute('data-tooltip')) {
+          header.style.position = 'relative';
+        }
+      });
+      
+      // Get the total number of metric columns (excluding model name column)
+      let totalMetricColumns = 0;
+      const metricCells = table.querySelectorAll('thead tr:nth-child(2) th:not(:first-child)');
+      totalMetricColumns = metricCells.length;
+      
+      if (totalMetricColumns > 0) {
+        // Calculate equal width for data columns
+        const equalWidth = `${(100 / totalMetricColumns).toFixed(2)}%`;
+        
+        // Apply equal width to all metric header cells
+        metricCells.forEach(cell => {
+          cell.style.width = equalWidth;
+          cell.style.minWidth = '40px';
+          cell.style.maxWidth = 'none'; // Let it take its share
+        });
+        
+        // Apply equal width to all data cells
+        const dataCells = table.querySelectorAll('tbody td:not(:first-child)');
+        dataCells.forEach(cell => {
+          cell.style.width = equalWidth;
+          cell.style.minWidth = '40px';
+          cell.style.maxWidth = 'none'; // Let it take its share
+        });
+      }
+      
+      // Set the model column to have a fixed width
+      const modelColumn = table.querySelectorAll('thead tr th:first-child, tbody td:first-child');
+      modelColumn.forEach(cell => {
+        cell.style.width = '160px';
+        cell.style.minWidth = '160px';
+        cell.style.maxWidth = '160px';
+      });
+    });
+  }
+
+  // Create a style element for additional fixes
+  const style = document.createElement('style');
+  style.textContent = `
+    /* Fix table layout issues */
+    .results-table table {
+      table-layout: fixed !important;
+      width: 100% !important;
+    }
+    
+    /* Ensure tooltips don't affect column widths */
+    .tooltip-trigger::after,
+    [data-tooltip]::after {
+      position: absolute !important;
+      content: attr(data-tooltip);
+      width: 300px !important;
+      max-width: 300px !important;
+      white-space: normal !important;
+      pointer-events: none;
+      display: none !important;
+    }
+    
+    /* Make sure dataset title cells don't grow too wide */
+    .results-table thead tr:first-child th:not(:first-child) {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  `;
+  document.head.appendChild(style);
+
+  // Run immediately 
+  fixTableColumnWidths();
+  
+  // Also run after a short delay
+  setTimeout(fixTableColumnWidths, 200);
+  
+  // Run again after images and other resources might have loaded
+  window.addEventListener('load', function() {
+    fixTableColumnWidths();
+    setTimeout(fixTableColumnWidths, 500);
+  });
+  
+  // Also run when tabs are clicked
+  const tabs = document.querySelectorAll('.tabs li');
+  tabs.forEach(tab => {
+    tab.addEventListener('click', () => {
+      setTimeout(fixTableColumnWidths, 200);
+    });
+  });
+  
+  // Also run on window resize
+  window.addEventListener('resize', fixTableColumnWidths);
+});

static/js/tooltip-fix.js

@@ -0,0 +1,15 @@
+document.addEventListener('DOMContentLoaded', function() {
+  // Fix for tooltips that stay bold after hover
+  const tooltipTriggers = document.querySelectorAll('.tooltip-trigger');
+  
+  tooltipTriggers.forEach(trigger => {
+    trigger.addEventListener('mouseleave', function() {
+      // Force style reset after hover
+      setTimeout(() => {
+        this.style.fontWeight = '';
+        this.style.fontSize = '';
+        this.style.textDecoration = '';
+      }, 50);
+    });
+  });
+});

static/js/tooltips.js

@@ -64,20 +64,47 @@ document.addEventListener('DOMContentLoaded', () => {
       customTooltip.innerHTML = `<strong>${title}</strong><br><br>${tooltipContent}`;
       document.body.appendChild(customTooltip);
       
-      // Position tooltip to RIGHT of element
+      // Position tooltip near the element
       const rect = tooltip.getBoundingClientRect();
-      console.log(`Element position: top=${rect.top}, left=${rect.left}`);
+      console.log(`Element position: top=${rect.top}, left=${rect.left}, width=${rect.width}, height=${rect.height}`);
       
-      customTooltip.style.top = `${window.scrollY + rect.top}px`;
+      // Position tooltip below and centered on the element
+      const tooltipWidth = 300; // Width of our tooltip in pixels
+      const verticalOffset = 5; // Small gap between element and tooltip
       
-      // Check if there's enough space on the left
-      if (rect.left > 320) {
-        // Position on left if there's room
-        customTooltip.style.left = `${rect.left - 310}px`;
-      } else {
-        // Position on right if there's not enough room on left
-        customTooltip.style.left = `${rect.right + 10}px`;
+      // Set tooltip position below the element
+      customTooltip.style.top = `${window.scrollY + rect.bottom + verticalOffset}px`;
+      
+      // Center the tooltip horizontally on the element
+      const tooltipLeft = rect.left + (rect.width / 2) - (tooltipWidth / 2);
+      
+      // But make sure it stays within the viewport bounds
+      const viewportWidth = window.innerWidth;
+      let adjustedLeft = tooltipLeft;
+      
+      // Check right edge
+      if (tooltipLeft + tooltipWidth > viewportWidth - 20) {
+        adjustedLeft = viewportWidth - tooltipWidth - 20;
       }
+      
+      // Check left edge
+      if (adjustedLeft < 20) {
+        adjustedLeft = 20;
+      }
+      
+      customTooltip.style.left = `${adjustedLeft}px`;
+      
+      // Add a small arrow at the top pointing to the element
+      const arrow = document.createElement('div');
+      arrow.style.position = 'absolute';
+      arrow.style.top = '-8px';
+      arrow.style.left = `${Math.max(0, Math.min(tooltipWidth - 20, rect.left + (rect.width / 2) - adjustedLeft - 8))}px`;
+      arrow.style.width = '0';
+      arrow.style.height = '0';
+      arrow.style.borderLeft = '8px solid transparent';
+      arrow.style.borderRight = '8px solid transparent';
+      arrow.style.borderBottom = '8px solid rgba(0, 0, 0, 0.9)';
+      customTooltip.appendChild(arrow);
       console.log(`Tooltip position: top=${customTooltip.style.top}, left=${customTooltip.style.left}`);
     });