Keep the chart tooltip inside the chart at both edges

The tooltip was clamped to a fixed 90px margin while it can grow to 260px,
so bars near the left edge pushed it outside the panel and cut the title and
view count. It now clamps against its measured width and rests against the
chart edge instead of staying centred.

src/panel.js

@@ -64,10 +64,18 @@ var OBPanel = (function () {
         if (item.id === videoId) meta.push(T.t("tipThisVideo"));
         tip.appendChild(el("div", "ob-tip-meta", meta.join(" · ")));
         tip.hidden = false;
-        /* Balon grafiğin içinde konumlanır, kenarlardan taşmaması için
-         * yatayda kırpılır. */
-        var left = slot.offsetLeft + slot.offsetWidth / 2;
-        tip.style.left = Math.min(Math.max(left, 90), chart.offsetWidth - 90) + "px";
+        /* Balon grafiğin içinde kalmalı. Genişliği içeriğe göre değiştiği için
+         * sabit bir paya göre değil, görünür hale geldikten sonra ölçülen
+         * gerçek genişliğe göre sıkıştırılıyor: kenardaki çubuklarda balon
+         * ortalanmak yerine grafiğin kenarına yaslanır. */
+        var center = slot.offsetLeft + slot.offsetWidth / 2;
+        /* Ölçümden önce sola yaslanıyor: absolute kutunun genişliği kalan
+         * alana göre daraldığı için, önceki hover'dan kalan left değeriyle
+         * ölçmek balonu olduğundan dar gösterirdi. */
+        tip.style.left = "0px";
+        var width = tip.offsetWidth;
+        var maxLeft = Math.max(0, chart.offsetWidth - width);
+        tip.style.left = Math.min(Math.max(center - width / 2, 0), maxLeft) + "px";
       });
       slot.addEventListener("click", function () {
         window.open("https://www.youtube.com/watch?v=" + item.id, "_blank", "noopener");

src/style.css

@@ -154,7 +154,7 @@
 .ob-tip {
   position: absolute;
   bottom: 100%;
-  transform: translateX(-50%);
+  left: 0;
   max-width: 260px;
   padding: 6px 8px;
   border-radius: 6px;