Tooltip

observablehq.config.js

@@ -17,7 +17,7 @@ export default {
   // ],
 
   // Content to add to the head of the page, e.g. for a favicon:
-  head: '<link rel="icon" href="observable.png" type="image/png" sizes="32x32">',
+  head: '<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap" rel="stylesheet">',
 
   // The path to the source root.
   root: "src",

src/index.md

@@ -109,7 +109,11 @@ function oddsPlot(d, {width} = {}) {
     .attr("width", width)
     .attr("height", height)
     .attr("viewBox", [0, 0, width, height])
-    .attr("style", "max-width: 100%; height: auto; background-color: black;");
+    .attr("style", "max-width: 100%; height: auto; background-color: black;")
+    .on("mousemove", function(event, d)
+      {
+        //hideToolTip();
+      });
 
 
 
@@ -144,10 +148,16 @@ function oddsPlot(d, {width} = {}) {
     )
     .html((d) => buildDualSquare(d, blockWidth, blockHeight))
     .on("mouseover", function(event, d){
-      infoTextContainer.html("<b>game!</b>")
-      const destX = x(d.year)-blockWidth/2;
-      const destY = y(d);
-      showTooltip(destX, destY);
+      event.stopPropagation();
+      const blockPos = d3.select(event.target.parentNode).attr("transform");
+      infoTextContainer.html(buildToolTip(d))
+      if(event.clientX+400>window.innerWidth)
+      {
+        infoTextContainer.attr("transform","translate(-400,0)");
+      }else{
+        infoTextContainer.attr("transform","translate(0,0)");
+      }
+      showTooltip(blockPos);
     })
     .on("mouseout", function(event, d){
       hideToolTip();
@@ -156,28 +166,23 @@ function oddsPlot(d, {width} = {}) {
 
     const infoBox = svg.append("g")
       .attr("class", "info-box")
-      .attr("x", 5)
-      .attr("y", 5)
-      .attr("transform", `translate(-1000,-1000)`)
-
-
-    const infoRect = infoBox.append("rect");
+      .attr("transform", `translate(-1000,1000)`)
+      .attr("opacity",1)
+      .attr("width", 420)
 
     const infoTextContainer = infoBox.append("g")
         .attr("fill", "white")
-        .attr("dy", 20)
-        .attr("width", 120)
+        .attr("width", 420)
 
 
-    function showTooltip(x,y)
+    function showTooltip(transform)
     {
-      infoBox.attr("transform", `translate(${x}, ${y})`);
-      infoBox.transition().delay(100).duration(500).ease(d3.easeBackOut).attr("opacity",1)
+      infoBox.attr("transform", `${transform}`)
+      infoBox.attr("opacity", 1);
     }
     function hideToolTip()
     {
-      infoBox.transition().duration(500).ease(d3.easeBackOut).attr("opacity",0)
-             .transition().delay(500).attr("transform", "translate(-1000,-1000)")
+      infoBox.attr("opacity",0)
     }
 
 
@@ -262,22 +267,111 @@ function buildDualSquare(d, width, height) {
 ```
 
 ```js
-function buildToolTip()
+function buildToolTip(d)
 {
+  const weekString = d.week ? `Week ${d.week}` : "Playoffs";
 
+  const awayTeam = d.at ? d.und : `${d.fav} (-${d.spread})`;
+  const homeTeam = d.at ? `${d.fav} (-${d.spread})` : d.und;
+  const ou_text = d.ou ? `<div class="tip-item tip-text-full">OU ${d.ou}</div>` : ""
+
+  const toolTipHTML = `
+    <foreignObject width="400" height="200" x="15" y="15">
+       <div xmlns="http://www.w3.org/1999/xhtml" id="tool-tip-container" class="lexend-400">
+        <div class="tip-item-full">${formatDate(d.date)} (${weekString})</div>
+        <div class="tip-item tip-text-left">${d.sF}</div><div class="tip-item-small">&nbsp;-&nbsp;</div><div class="tip-item tip-text-right">${d.sU}</div>
+        <div class="tip-item tip-text-left">${awayTeam}</div><div class="tip-item-small">&nbsp;@&nbsp;</div><div class="tip-item tip-text-right">${homeTeam}</div>
+        ${ou_text}
+      </div>
+    </foreignObject>
+  `
+  return toolTipHTML;
 }
 ```
 
+
+<div class="grid grid-cols-2">
+  <div class="card">${teamSelect}${viewSelect}</div>
+  <div class="card">Legend</div>
+</div>
+<div class="grid grid-cols-1">
+  <div class="card">${resize((width) => oddsPlot(oddsfile, {width}))}</div>
+</div>
+
 <style>
   .gameBlock
   {
     cursor: pointer;
   }
-</style>
 
-<div class="grid grid-cols-2">
-  <div class="card">${teamSelect}</div>
-</div>
-<div class="grid grid-cols-1">
-  <div class="card">${resize((width) => oddsPlot(oddsfile, {width}))}</div>
-</div>
+  .info-box
+  {
+    pointer-events: none;
+  }
+
+  #tool-tip-container
+  {
+    color: white;
+    background-color: black;
+    border: 3px solid white;
+    padding: 15px;
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+    row-gap: 10px;
+
+  }
+
+  #tool-tip-container .tip-item
+  {
+    flex-basis: 140px;
+  }
+
+  #tool-tip-container .tip-item-small
+  {
+    flex-basis: 25px;
+    text-align: center;
+    padding: 0px 3px;
+  }
+
+  #tool-tip-container .tip-item-full
+  {
+    flex-basis:100%;
+  }
+
+  #tool-tip-container .tip-text-left, #tool-tip-container .tip-text-right
+  {
+    text-wrap: nowrap;
+  }
+
+  #tool-tip-container .tip-text-left
+  {
+    text-align: right;
+  }
+
+  #tool-tip-container .tip-text-right
+  {
+    text-align: left;
+  }
+
+  .score
+  {
+    padding: 10px;
+    border: 2px white;
+  }
+
+  .lexend-400 {
+    font-family: "Lexend", serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+  }
+  .lexend-200 {
+    font-family: "Lexend", serif;
+    font-optical-sizing: auto;
+    font-weight: 200;
+    font-style: normal;
+  }
+</style>