Adds popover to access badge in commit graph

- updates access content to match home view
- adds placement attr to popover component

src/webviews/apps/plus/graph/GraphWrapper.tsx

@@ -48,6 +48,7 @@ import type { Subscription } from '../../../../subscription';
 import { getSubscriptionTimeRemaining, SubscriptionState } from '../../../../subscription';
 import { pluralize } from '../../../../system/string';
 import type { IpcNotificationType } from '../../../../webviews/protocol';
+import { PopOver } from '../../shared/components/overlays/react';
 import { SearchBox } from '../../shared/components/search/react';
 import type { SearchNavigationEventDetail } from '../../shared/components/search/search-box';
 import type { DateTimeFormat } from '../../shared/date';
@@ -533,11 +534,8 @@ export function GraphWrapper({
 		}
 
 		return (
-			<span className="mr-loose">
-				<span
-					className="badge"
-					title={`Can access GitLens+ features on ${isPro ? 'any repo' : 'local & public repos'}`}
-				>
+			<span className="badge-container mr-loose">
+				<span className="badge is-help">
 					<span className={`repo-access${isPro ? ' is-pro' : ''}`}>✨</span> {label}
 					{subText && (
 						<>
@@ -546,6 +544,12 @@ export function GraphWrapper({
 						</>
 					)}
 				</span>
+				<PopOver placement="bottom end" className="badge-popover">
+					You have access to GitLens+ features on {isPro ? 'any repo' : 'local & public repos'}, and all other
+					GitLens features on any repo.
+					<br />
+					<br />✨ indicates GitLens+ features
+				</PopOver>
 			</span>
 		);
 	};

src/webviews/apps/plus/graph/graph.scss

@@ -3,6 +3,16 @@
 @import '../../shared/glicons';
 @import '../../../../../node_modules/@gitkraken/gitkraken-components/dist/styles.css';
 
+.vscode-high-contrast,
+.vscode-dark {
+	--popover-bg: var(--color-background--lighten-15);
+}
+
+.vscode-high-contrast-light,
+.vscode-light {
+	--popover-bg: var(--color-background--darken-15);
+}
+
 body {
 	.vertical_scrollbar,
 	.horizontal_scrollbar {
@@ -51,11 +61,29 @@ a {
 	font-weight: 700;
 	text-transform: uppercase;
 
+	&.is-help {
+		cursor: help;
+	}
+
 	small {
 		font-size: inherit;
 		opacity: 0.6;
 		font-weight: 400;
 	}
+
+	&-container {
+		position: relative;
+	}
+
+	&-popover {
+		width: max-content;
+		right: 0;
+		bottom: 100%;
+	}
+
+	&:not(:hover) + &-popover {
+		display: none;
+	}
 }
 
 .actionbar {
@@ -210,7 +238,6 @@ a {
 .repo-access {
 	font-size: 1.1em;
 	margin-right: 0.2rem;
-	cursor: help;
 
 	&:not(.is-pro) {
 		filter: grayscale(1) brightness(0.7);

src/webviews/apps/shared/components/overlays/pop-over.ts

@@ -44,10 +44,14 @@ const styles = css`
 		gap: 0.4rem;
 	}
 
-	:host([caret]) {
+	:host([caret]:not([placement~='bottom'])) {
 		transform: translateY(0.8rem);
 	}
 
+	:host([caret][placement~='bottom']) {
+		transform: translateY(-0.8rem);
+	}
+
 	.top {
 		display: flex;
 		flex-direction: row;
@@ -63,13 +67,29 @@ const styles = css`
 
 	.caret {
 		position: absolute;
-		bottom: 100%;
 		width: 0;
 		height: 0;
 		border-left: 0.8rem solid transparent;
 		border-right: 0.8rem solid transparent;
 		border-bottom: 0.8rem solid var(--popover-bg);
 	}
+
+	:host(:not([placement~='bottom'])) .caret {
+		bottom: 100%;
+	}
+
+	:host([placement~='bottom']) .caret {
+		top: 100%;
+		transform: rotate(180deg);
+	}
+
+	:host(:not([placement~='end'])) .caret {
+		left: 1.2rem;
+	}
+
+	:host([placement~='end']) .caret {
+		right: 1.2rem;
+	}
 `;
 
 @customElement({ name: 'pop-over', template: template, styles: styles })
@@ -80,6 +100,9 @@ export class PopOver extends FASTElement {
 	@attr({ mode: 'boolean' })
 	caret = true;
 
+	@attr
+	placement?: string;
+
 	@observable
 	typeNodes?: Node[];