Skip to content

W
www
Commit de886fcf by PLN (Algolia)
Options

feat(Landing): tooltip

parent c861d88c
Showing with 330 additions and 4 deletions
next/components/HoverTooltip.js 0 → 100644
import React, { useState, useRef, useEffect } from 'react';
import styles from '@/styles/utils.module.css';
export default function HoverTooltip({ children, content, links }) {
const [isVisible, setIsVisible] = useState(false);
const timeoutRef = useRef(null);
const handleMouseEnter = () => {
clearTimeout(timeoutRef.current);
setIsVisible(true);
};
const handleMouseLeave = () => {
timeoutRef.current = setTimeout(() => {
setIsVisible(false);
}, 300); // 0.3 second delay before hiding
};
// Clear timeout on unmount
useEffect(() => {
return () => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
};
}, []);
return (
<span
className={styles.hoverTrigger}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onFocus={handleMouseEnter}
onBlur={handleMouseLeave}
tabIndex="0"
>
{children}
{isVisible && (
<div className={styles.hoverPopup}>
<div className={styles.popupContent}>
{/* TODO:Render markdown or JSX in content */}
<p>{content}</p>
{links && links.length > 0 && (
<div className={styles.popupLinks}>
{links.map((link, index) => (
<a
key={index}
href={link.url}
target="_blank"
rel="noopener noreferrer"
onClick={e => e.stopPropagation()}
>
{link.text}
</a>
))}
</div>
)}
</div>
</div>
)}
</span>
);
}
\ No newline at end of file
next/pages/index.js
......@@ -5,6 +5,7 @@ import Layout from "../components/layout";
import utilStyles from "../styles/utils.module.css";
import { getPostsData } from "../lib/posts";
import { getRecentTalksData } from "../lib/talks";
import HoverTooltip from "@/components/HoverTooltip";
export async function getStaticProps() {
const nbLastTalks = 3;
......@@ -29,17 +30,67 @@ export default function Home({ posts, talks }) {
<link rel="icon" href="/favicon.ico" />
</Head>
<section className={utilStyles.headingMd}>
<h1 className="title">Bienvenue !</h1>
<h1 className="title">Bonjour !</h1>
<h2>
I'm PLN, and I love to <i>transform…</i>
</h2>
<h3>
…code into <em>solutions to human problems</em>
</h3>
</h3><br />
<p className="description">
At <a href="https://algolia.com">Algolia</a>, I create technologies
to help humans find things, get <a href="https://algolia.com/products/recommendations">inspired</a>, and <a href="https://www.algolia.com/blog/ai/launching-an-industry-leading-artificially-intelligent-search-platform/">be understood</a>.
At <a href="https://algolia.com">Algolia</a>, I've crafted tools that help you{" "}
<HoverTooltip
content="From 2016 to 2018, I built tools to accelerate Android developers crafting unique search experiences."
links={[
{
text: "Crafted the first Algolia Mobile Search Toolkit, InstantSearch-Android",
url: "https://github.com/algolia/instantsearch-android"
},
{
text: "Built the Voice-Overlay, an open-source voice input and STT helper",
url: "https://github.com/algolia/voice-overlay-android"
}
]}
>
build mobile apps
</HoverTooltip>,{" "}
<HoverTooltip
content="From 2019 to 2021, I built tools to better understand search users and give them semantic answers:
Algolia Understand was a cross-index Intent Detection and Entity Recognition API, and Algolia Answers was a Question Answering API with Semantic Reranking using early Transformer models & Smart Highlighting with QA models."
links={[
{
text: "Algolia Understand",
url: "https://www.algolia.com/blog/ai/launching-an-industry-leading-artificially-intelligent-search-platform/"
}
]}
>
understand your users
</HoverTooltip>, and {" "}
<HoverTooltip
content="From 2022 to 2024, I worked on Recommendation APIs - serving at high-scale (billions of items per months) a blend of algorithms to recommend content by learning from either user behavior, semantic image analysis, or textual analysis."
links={[
{
text: "LookingSimilar",
url: "https://www.algolia.com/about/news/algolia-unveils-new-looking-similar-capability-elevating-shopping-experiences-with-image-based-recommendations"
}
]}
>
show them your world
</HoverTooltip>.<br />
Nowadays, i create GenAI tools for{" "}
<HoverTooltip
content="Blending state-of-the-art LLMs with world-class search engines to create next-generation AI experiences."
links={[
{
text: "Generative Experiences",
url: "https://www.algolia.com/products/ai-search/"
}
]}
>
builders of unique experiences
</HoverTooltip><br />{" "}
that blend the best of search and AI.
</p>
</section>
<section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
......
next/styles/main.css
......@@ -84,3 +84,8 @@ h1 a, h2 a, h3 a, h4 a, h5 a {
top: 0;
left: 0;
}
.description {
font-size: 1.2rem;
line-height: 2.5;
}
\ No newline at end of file
next/styles/utils.module.css
......@@ -365,3 +365,208 @@
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Hover Popup Styles */
.hoverReveal {
position: relative;
border-bottom: 1px dotted #666;
cursor: help;
}
.hoverReveal:hover::after,
.hoverReveal:focus::after {
content: attr(title);
position: absolute;
left: 50%;
bottom: calc(100% + 10px);
transform: translateX(-50%);
z-index: 100;
min-width: 250px;
max-width: 350px;
padding: 1rem;
background: #fff;
color: #333;
font-size: 1rem;
line-height: 1.5;
text-align: center;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border: 1px solid #eee;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0s 0.2s;
}
.hoverReveal:hover::before,
.hoverReveal:focus::before {
content: "";
position: absolute;
left: 50%;
bottom: calc(100% + 5px);
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
border-color: #eee transparent transparent transparent;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0s 0.2s;
}
.hoverReveal:hover::after,
.hoverReveal:hover::before,
.hoverReveal:focus::after,
.hoverReveal:focus::before {
opacity: 1;
visibility: visible;
transition: opacity 0.2s;
}
/* Popup Persistence */
.hoverReveal::after,
.hoverReveal::before {
transition-delay: 0s;
}
.hoverReveal:hover::after,
.hoverReveal:hover::before,
.hoverReveal:focus::after,
.hoverReveal:focus::before {
transition-delay: 0s;
}
.hoverReveal:not(:hover)::after,
.hoverReveal:not(:hover)::before,
.hoverReveal:not(:focus)::after,
.hoverReveal:not(:focus)::before {
transition-delay: 1s;
}
/* Ensure links within tooltips are clickable */
.hoverReveal:hover::after a,
.hoverReveal:focus::after a {
color: #0070f3;
text-decoration: underline;
position: relative;
z-index: 101;
}
/* Paper-like effect for tooltips */
.hoverReveal::after {
background-image: linear-gradient(to bottom, #fff 0%, #f9f9f9 100%);
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
}
/* Advanced Tooltip Styles */
.hoverTrigger {
position: relative;
border-bottom: 1px dotted #666;
cursor: help;
display: inline-block;
}
.hoverPopup {
position: absolute;
left: 50%;
bottom: calc(100% + 15px);
transform: translateX(-50%);
z-index: 100;
min-width: 280px;
max-width: 380px;
animation: fadeIn 0.2s ease-in-out;
}
.popupContent {
background: #fff;
color: #333;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
border: 1px solid #eee;
font-size: 1rem;
line-height: 1.6;
text-align: left;
/* Paper-like effect */
background-image: linear-gradient(to bottom, #fff 0%, #f9f9f9 100%);
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
}
.popupContent p {
margin: 0 0 0.8rem 0;
}
.popupLinks {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
margin-top: 0.5rem;
}
.popupLinks a {
display: inline-block;
color: #0070f3;
text-decoration: none;
font-size: 0.9rem;
background: #f5f7ff;
padding: 0.25rem 0.6rem;
border-radius: 4px;
transition: all 0.2s ease;
}
.popupLinks a:hover {
background: #e6eaff;
text-decoration: underline;
}
.hoverPopup::before {
content: "";
position: absolute;
left: 50%;
bottom: -5px;
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
border-color: #eee transparent transparent transparent;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateX(-50%) translateY(10px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
/* Make tooltips accessible via keyboard navigation */
.hoverTrigger:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(0, 112, 243, 0.3);
border-radius: 2px;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.hoverPopup {
min-width: 220px;
max-width: 300px;
}
.popupContent {
padding: 0.8rem;
font-size: 0.9rem;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment