Better title text for full video labels

4 files changed, 85 insertions, 13 deletions

diff --git a/public/content.css b/public/content.css
index 6f121e84..065cb759 100644
--- a/public/content.css
+++ b/public/content.css
@@ -594,7 +594,7 @@ input::-webkit-inner-spin-button {
 	color: white;
 }
 
-.sponsorBlockTooltip::after {
+.sponsorBlockTooltip.sbTriangle::after {
     content: " ";
     position: absolute;
     top: 100%;
diff --git a/src/components/CategoryPillComponent.tsx b/src/components/CategoryPillComponent.tsx
index b753bc5b..7d46d0aa 100644
--- a/src/components/CategoryPillComponent.tsx
+++ b/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");
diff --git a/src/components/TooltipComponent.tsx b/src/components/TooltipComponent.tsx
new file mode 100644
index 00000000..5e2cacb2
--- /dev/null
+++ b/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;
diff --git a/src/render/Tooltip.tsx b/src/render/Tooltip.tsx
index 3fe14410..fa32d915 100644
--- a/src/render/Tooltip.tsx
+++ b/src/render/Tooltip.tsx
@@ -9,6 +9,9 @@ export interface TooltipProps {
     bottomOffset?: string
     timeout?: number;
     opacity?: number;
+    displayTriangle?: boolean;
+    showLogo: boolean;
+    showGotIt: boolean;
 }
 
 export class Tooltip {
@@ -20,6 +23,9 @@ export class Tooltip {
     constructor(props: TooltipProps) {
         props.bottomOffset ??= "70px";
         props.opacity ??= 0.7;
+        props.displayTriangle ??= true;
+        props.showLogo ??= true;
+        props.showGotIt ??= true;
         this.text = props.text;
 
         this.container = document.createElement('div');
@@ -40,11 +46,13 @@ export class Tooltip {
         
         ReactDOM.render(
             <div style={{bottom: props.bottomOffset, backgroundColor}} 
-                className="sponsorBlockTooltip" >
+                className={"sponsorBlockTooltip" + (props.displayTriangle ? " sbTriangle" : "")} >
                 <div>
-                    <img className="sponsorSkipLogo sponsorSkipObject"
-                        src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
-                    </img>
+                    {props.showLogo ? 
+                        <img className="sponsorSkipLogo sponsorSkipObject"
+                            src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                        </img>
+                    : null}
                     <span className="sponsorSkipObject">
                         {this.text + (props.link ? ". " : "")}
                         {props.link ? 
@@ -53,16 +61,18 @@ export class Tooltip {
                                     rel="noopener noreferrer"
                                     href={props.link}>
                                 {chrome.i18n.getMessage("LearnMore")}
-                                </a> 
+                            </a> 
                         : null}
                     </span>
                 </div>
-                <button className="sponsorSkipObject sponsorSkipNoticeButton"
-                    style ={{float: "right" }}
-                    onClick={() => this.close()}>
+                {props.showGotIt ?
+                    <button className="sponsorSkipObject sponsorSkipNoticeButton"
+                        style ={{float: "right" }}
+                        onClick={() => this.close()}>
 
-                    {chrome.i18n.getMessage("GotIt")}
-                </button>
+                        {chrome.i18n.getMessage("GotIt")}
+                    </button>
+                : null}
             </div>,
             this.container
         )