Adds tooltips to focus view

Author: d13

src/webviews/apps/plus/focus/components/gk-issue-row.ts

@@ -127,14 +127,18 @@ export class GkIssueRow extends LitElement {
 						<gk-badge>pending suggestions</gk-badge> -->
 					</p>
 					<p>
-						<gk-tag variant="ghost">
-							<span slot="prefix"><code-icon icon="comment-discussion"></code-icon></span>
-							${this.issue.commentsCount}
-						</gk-tag>
-						<gk-tag variant="ghost">
-							<span slot="prefix"><code-icon icon="thumbsup"></code-icon></span>
-							${this.issue.thumbsUpCount}
-						</gk-tag>
+						<gk-tooltip
+							><gk-tag variant="ghost" slot="trigger">
+								<span slot="prefix"><code-icon icon="comment-discussion"></code-icon></span>
+								${this.issue.commentsCount} </gk-tag
+							><span>Comments</span></gk-tooltip
+						>
+						<gk-tooltip
+							><gk-tag variant="ghost" slot="trigger">
+								<span slot="prefix"><code-icon icon="thumbsup"></code-icon></span>
+								${this.issue.thumbsUpCount} </gk-tag
+							><span>Thumbs Up</span></gk-tooltip
+						>
 					</p>
 					<span slot="people">
 						<gk-avatar-group>

src/webviews/apps/plus/focus/components/gk-pull-request-row.ts

@@ -211,10 +211,13 @@ export class GkPullRequestRow extends LitElement {
 							<span slot="additions">${this.pullRequest.additions}</span>
 							<span slot="deletions">${this.pullRequest.deletions}</span>
 						</gk-additions-deletions>
-						<gk-tag variant="ghost">
-							<span slot="prefix"><code-icon icon="comment-discussion"></code-icon></span>
-							${this.pullRequest.comments}
-						</gk-tag>
+						<gk-tooltip>
+							<gk-tag variant="ghost" slot="trigger">
+								<span slot="prefix"><code-icon icon="comment-discussion"></code-icon></span>
+								${this.pullRequest.comments}
+							</gk-tag>
+							<span>Comments</span>
+						</gk-tooltip>
 					</p>
 					<span slot="people">
 						<gk-avatar-group>

src/webviews/apps/plus/focus/components/gk-theme.css.ts

@@ -21,8 +21,8 @@ export const themeProperties = css`
 		--gk-button-outline-color-active: var(--background-10);
 		--gk-button-outline-color-disabled: var(--color-foreground--50);
 
-		--gk-tooltip-background-color: var(--popover-bg);
-		--gk-tooltip-font-color: var(--color-foreground);
+		--gk-tooltip-background-color: var(--popover-bg); // var(--vscode-editorHoverWidget-background);
+		--gk-tooltip-font-color: var(--color-foreground); // var(--vscode-editorHoverWidget-foreground);
 		--gk-tooltip-font-weight: normal;
 		--gk-tooltip-font-size: 1.2rem;
 	}