Add tooltip about full video update

src/render/CategoryPill.tsx

@@ -1,9 +1,11 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import CategoryPillComponent, { CategoryPillState } from "../components/CategoryPillComponent";
+import Config from "../config";
 import { VoteResponse } from "../messageTypes";
 import { Category, SegmentUUID, SponsorTime } from "../types";
 import { GenericUtils } from "../utils/genericUtils";
+import { Tooltip } from "./Tooltip";
 
 export class CategoryPill {
     container: HTMLElement;
@@ -79,7 +81,7 @@ export class CategoryPill {
         }
     }
 
-    setSegment(segment: SponsorTime): void {
+    async setSegment(segment: SponsorTime): Promise<void> {
         if (this.ref.current?.state?.segment !== segment) {
             const newState = {
                 segment,
@@ -92,7 +94,23 @@ export class CategoryPill {
             } else {
                 this.unsavedState = newState;
             }
+
+            if (!Config.config.categoryPillUpdate) {
+                Config.config.categoryPillUpdate = true;
+
+                const watchDiv = await GenericUtils.wait(() => document.querySelector("#info.ytd-watch-flexy") as HTMLElement);
+                if (watchDiv) {
+                    new Tooltip({
+                        text: chrome.i18n.getMessage("categoryPillNewFeature"),
+                        link: "https://blog.ajay.app/full-video-sponsorblock",
+                        referenceNode: watchDiv,
+                        prependElement: watchDiv.firstChild as HTMLElement,
+                        bottomOffset: "-10px",
+                        opacity: 0.95,
+                        timeout: 50000
+                    });
+                }
+            }
         }
-        
     }
 }

src/render/Tooltip.tsx

@@ -8,6 +8,7 @@ export interface TooltipProps {
     prependElement?: HTMLElement, // Element to append before
     bottomOffset?: string
     timeout?: number;
+    opacity?: number;
 }
 
 export class Tooltip {
@@ -18,11 +19,12 @@ export class Tooltip {
     
     constructor(props: TooltipProps) {
         props.bottomOffset ??= "70px";
+        props.opacity ??= 0.7;
         this.text = props.text;
 
         this.container = document.createElement('div');
         this.container.id = "sponsorTooltip" + props.text;
-        this.container.style.display = "relative";
+        this.container.style.position = "relative";
 
         if (props.prependElement) {
             props.referenceNode.insertBefore(this.container, props.prependElement);
@@ -34,8 +36,10 @@ export class Tooltip {
             this.timer = setTimeout(() => this.close(), props.timeout * 1000);
         }
 
+        const backgroundColor = `rgba(28, 28, 28, ${props.opacity})`;
+        
         ReactDOM.render(
-            <div style={{bottom: props.bottomOffset}} 
+            <div style={{bottom: props.bottomOffset, backgroundColor}} 
                 className="sponsorBlockTooltip" >
                 <div>
                     <img className="sponsorSkipLogo sponsorSkipObject"