Add a tooltip component and work on the btn styles

src/components/controllers/tutorial/index.js

@@ -19,6 +19,7 @@ import { usePage } from '../page';
 import { useStore, storeCtx } from '../../store-adapter';
 import { InjectPrerenderData } from '../../../lib/prerender-data';
 import { getContent } from '../../../lib/content';
+import { WithTooltip } from '../../../lib/tooltip/tooltip';
 
 const IS_PRERENDERING = typeof window === 'undefined';
 
@@ -264,9 +265,14 @@ function TutorialView({
 						</button>
 					)}
 					{page.meta.next && (
-						<a class={style.nextButton} href={page.meta.next}>
-							{page.meta.nextText || 'Next'}
-						</a>
+						<WithTooltip
+							showTooltip={solvable ? !solved : undefined}
+							tooltip={`The challenge is not solved yet! Try to solve it before moving to the next chapter`}
+						>
+							<a class={style.nextButton} href={page.meta.next}>
+								{page.meta.nextText || 'Next'}
+							</a>
+						</WithTooltip>
 					)}
 				</div>
 			</div>

src/components/controllers/tutorial/style.module.less

@@ -25,15 +25,23 @@
 		display: flex;
 		align-content: stretch;
 		justify-content: stretch;
+		position: relative;
 
 		&.solvable:not(&.solved) .nextButton,
 		&.solvable:not(&.solved) .nextButton:hover {
-			background: #534e5b;
+			background-color: transparent;
+			color: #fff;
 			transform: none;
+			box-shadow: none;
+			border-width: 2px;
+			border-color: var(--color-brand);
+
+			@media all and (prefers-color-scheme: light) {
+				color: black;
+			}
 		}
 
 		.tutorialWindow {
-			position: relative;
 			background: var(--color-page-bg);
 			color: var(--color-heading);
 			display: flex;
@@ -43,6 +51,7 @@
 			transition: opacity 1s ease;
 			box-shadow: 1px 0 0 var(--color-brand);
 			overflow-y: scroll;
+			overflow-x: hidden;
 			z-index: 10;
 
 			&::-webkit-scrollbar {
@@ -166,6 +175,8 @@
 					outline: none;
 					background: var(--color-btn-background);
 					color: var(--color-btn);
+					border-width: 2px;
+
 					cursor: pointer;
 					&:hover,
 					&:focus-visible {
@@ -178,10 +189,22 @@
 					}
 				}
 
+				.helpButton,
+				.prevButton {
+					background-color: transparent;
+					color: #fff;
+
+					@media all and (prefers-color-scheme: light) {
+						color: black;
+					}
+				}
+
 				.nextButton {
-					background: var(--color-btn);
-					border-color: var(--color-btn-background);
-					color: var(--color-btn-background);
+					background-color: var(--color-brand);
+					border-width: 0;
+					color: white;
+					display: flex;
+					align-items: center;
 				}
 
 				.nextButton:hover,

src/lib/tooltip/tooltip.css

@@ -0,0 +1,35 @@
+.tooltip-enabled:hover + .tooltip-container {
+	opacity: 1;
+}
+
+.tooltip-container {
+	position: absolute;
+	pointer-events: none;
+	opacity: 0;
+	transition: 200ms ease-in-out opacity;
+}
+
+.tooltip-content {
+	position: absolute;
+	transform: translate(-50%, -110%);
+	width: 220px;
+	background-color: black;
+	border-radius: 4px;
+	padding: 6px;
+	text-align: center;
+	z-index: 1;
+}
+
+.tooltip-content:before {
+	content: '';
+	display: block;
+	width: 0;
+	height: 0;
+	position: absolute;
+	border-top: 8px solid black;
+	border-left: 8px solid transparent;
+	border-right: 8px solid transparent;
+	transform: translate(-50%, 0);
+	left: 50%;
+	bottom: -8px;
+}

src/lib/tooltip/tooltip.js

@@ -0,0 +1,40 @@
+import { h } from 'preact';
+import { useRef, useState } from 'preact/hooks';
+import cx from '../cx';
+import './tooltip.css';
+
+export const WithTooltip = ({ children, tooltip, showTooltip = true }) => {
+	const wrapper = useRef();
+	const [pos, setPos] = useState({ top: 0, left: 0 });
+
+	function handleMouseOver() {
+		const rect = wrapper.current.getBoundingClientRect();
+		const header = document
+			.querySelector('#app > header')
+			.getBoundingClientRect();
+		setPos({ top: rect.y - header.height, left: rect.left + rect.width / 2 });
+	}
+
+	return (
+		<>
+			<div
+				className={cx(showTooltip && 'tooltip-enabled')}
+				ref={wrapper}
+				onMouseOver={handleMouseOver}
+			>
+				{children}
+			</div>
+			{showTooltip ? (
+				<div
+					className="tooltip-container"
+					style={{
+						top: pos.top,
+						left: pos.left
+					}}
+				>
+					<div className="tooltip-content">{tooltip}</div>
+				</div>
+			) : null}
+		</>
+	);
+};