Better title text for full video labels

src/components/CategoryPillComponent.tsx

@@ -8,6 +8,7 @@ import { downvoteButtonColor, SkipNoticeAction } from "../utils/noticeUtils";
 import { VoteResponse } from "../messageTypes";
 import { AnimationUtils } from "../utils/animationUtils";
 import { GenericUtils } from "../utils/genericUtils";
+import { Tooltip } from "../render/Tooltip";
 
 export interface CategoryPillProps {
     vote: (type: number, UUID: SegmentUUID, category?: Category) => Promise<VoteResponse>;
@@ -21,6 +22,8 @@ export interface CategoryPillState {
 
 class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryPillState> {
 
+    tooltip?: Tooltip;
+
     constructor(props: CategoryPillProps) {
         super(props);
 
@@ -41,8 +44,10 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
         return (
             <span style={style}
                 className={"sponsorBlockCategoryPill"} 
-                title={this.getTitleText()}
-                onClick={(e) => this.toggleOpen(e)}>
+                aria-label={this.getTitleText()}
+                onClick={(e) => this.toggleOpen(e)}
+                onMouseEnter={() => this.openTooltip()}
+                onMouseLeave={() => this.closeTooltip()}>
                 <span className="sponsorBlockCategoryPillTitleSection">
                     <img className="sponsorSkipLogo sponsorSkipObject"
                         src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
@@ -134,6 +139,26 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
         }
     }
 
+    private openTooltip(): void {
+        const tooltipMount = document.querySelector("ytd-video-primary-info-renderer > #container") as HTMLElement;
+        if (tooltipMount) {
+            this.tooltip = new Tooltip({
+                text: this.getTitleText(),
+                referenceNode: tooltipMount,
+                bottomOffset: "70px",
+                opacity: 0.95,
+                displayTriangle: false,
+                showLogo: false,
+                showGotIt: false
+            });
+        }
+    }
+
+    private closeTooltip(): void {
+        this.tooltip?.close();
+        this.tooltip = null;
+    }
+
     getTitleText(): string {
         const shortDescription = chrome.i18n.getMessage(`category_${this.state.segment?.category}_pill`);
         return (shortDescription ? shortDescription + ". ": "") + chrome.i18n.getMessage("categoryPillTitleText");

src/components/TooltipComponent.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import Config from "../config";
+import { Category, SegmentUUID, SponsorTime } from "../types";
+
+export interface TooltipProps {
+    text: string;
+    show: boolean;
+}
+
+export interface TooltipState {
+
+}
+
+class TooltipComponent extends React.Component<TooltipProps, TooltipState> {
+
+    constructor(props: TooltipProps) {
+        super(props);
+    }
+
+    render(): React.ReactElement {
+        const style: React.CSSProperties = {
+            display: this.props.show ? "flex" : "none",
+            position: "absolute",
+        }
+
+        return (
+            <span style={style}
+                className={"sponsorBlockTooltip"} >
+                <span className="sponsorBlockTooltipText">
+                    {this.props.text}
+                </span>
+            </span>
+        );
+    }
+}
+
+export default TooltipComponent;