Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Design Engineering Tip Your tooltip doesn’t always end up where you placed it? When it reaches the viewport edge, the browser automatically chooses a fallback position. Anchored Container Queries let your CSS detect that chosen position, so your tooltip can animate from the correct direction. @ container anchored(fallback: flip-block)...

gabriell_lab's profile picture

Gabriel

12,970 subscribers

12,010 Aufrufe • vor 3 Monaten •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

hardcoded tooltip CSS works until it meets the edge bad (gets clipped): position absolute left 100% translateY(-50%) good: (collision aware) measure viewport space choose placement set top/left move the arrow animate from the correct origin
0:17

hardcoded tooltip CSS works until it meets the edge bad (gets clipped): position absolute left 100% translateY(-50%) good: (collision aware) measure viewport space choose placement set top/left move the arrow animate from the correct origin

Tanvir

54,846 Aufrufe • vor 4 Monaten

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!
0:16

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!

CSS by T. Afif

57,924 Aufrufe • vor 1 Jahr

A list (with code) of cool framer-motion and Tailwind CSS components from around the internet ✨ 1️⃣ Tooltip A simple and elegant tooltip component that follows the mouse pointer
0:11

A list (with code) of cool framer-motion and Tailwind CSS components from around the internet ✨ 1️⃣ Tooltip A simple and elegant tooltip component that follows the mouse pointer

Aceternity

43,806 Aufrufe • vor 3 Jahren

💡 CSS Tip! Two circles, one arrow, and CSS magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.
0:19

💡 CSS Tip! Two circles, one arrow, and CSS magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.

CSS by T. Afif

82,668 Aufrufe • vor 10 Monaten

Base UI Tooltip with the detached triggers API
0:12

Base UI Tooltip with the detached triggers API

Colm Tuite

15,228 Aufrufe • vor 5 Monaten

Timing is a small aspect that changes how an interaction feels When every tooltip has a hover delay, reading a whole toolbar takes 6.9s. With a delay only on the first one, it takes 3.7s The first tooltip waits ~500ms so it doesn't appear by accident. Once you move between icons, you're clearly exploring, so the rest appear instantly. Move away for ~300ms and the delay resets
0:16

Timing is a small aspect that changes how an interaction feels When every tooltip has a hover delay, reading a whole toolbar takes 6.9s. With a delay only on the first one, it takes 3.7s The first tooltip waits ~500ms so it doesn't appear by accident. Once you move between icons, you're clearly exploring, so the rest appear instantly. Move away for ~300ms and the delay resets

Juliette

21,385 Aufrufe • vor 13 Tagen

design tip: scaling everyone scales things from the center. scaling from the exact point you clicked/hovered feels 10x better, and it's basically one property: 1. transform-origin: pointer's position as % of container 2. animate scale from 0 to 1 more details below ↓
0:13

design tip: scaling everyone scales things from the center. scaling from the exact point you clicked/hovered feels 10x better, and it's basically one property: 1. transform-origin: pointer's position as % of container 2. animate scale from 0 to 1 more details below ↓

Harsh Singh

16,405 Aufrufe • vor 3 Monaten

The magic of clip paths. Animated tooltip component in NextJS and Matt Perry's motion.
0:12

The magic of clip paths. Animated tooltip component in NextJS and Matt Perry's motion.

Seyi

42,833 Aufrufe • vor 1 Jahr

This tooltip by ⁦Dima Belyaev⁩ 🤯
0:15

This tooltip by ⁦Dima Belyaev⁩ 🤯

Hakim El Hattab

89,100 Aufrufe • vor 3 Jahren

On your open perpetual position can become an NFT and live in your wallet. You open a position like normal than mint it. The program issues a token 2022 nft, that points to your exact position. Normally your open position lives inside the protocol. With Percolator Trade your able to wrap it into an NFT that sits in your own wallet. A real, ownable object instead of a line in a dashboard. Because it’s a token, it moves like one. Send the NFT to another wallet and the position goes with it. Whoever holds the NFT owns the trade. One NFT = one position If you burn it, your back to holding the position directly. That’s the composable part, a position use to be stuck inside one account. Because it’s a token, it can now be sold OTC or used by anything that speaks tokens. Why does it matter? Because the position is bound to the NFT, it can’t be drained out from under whoever holds it so there is no middleman that holds your position. The NFT does, and the NFT is yours. One important safety detail; transfers run through a token 2022 hook that checks the positions health first, so it can’t be handed off in a broken state & the NFT layer is a separate program so it can never touch the funds the core engine holds.
0:13

On your open perpetual position can become an NFT and live in your wallet. You open a position like normal than mint it. The program issues a token 2022 nft, that points to your exact position. Normally your open position lives inside the protocol. With Percolator Trade your able to wrap it into an NFT that sits in your own wallet. A real, ownable object instead of a line in a dashboard. Because it’s a token, it moves like one. Send the NFT to another wallet and the position goes with it. Whoever holds the NFT owns the trade. One NFT = one position If you burn it, your back to holding the position directly. That’s the composable part, a position use to be stuck inside one account. Because it’s a token, it can now be sold OTC or used by anything that speaks tokens. Why does it matter? Because the position is bound to the NFT, it can’t be drained out from under whoever holds it so there is no middleman that holds your position. The NFT does, and the NFT is yours. One important safety detail; transfers run through a token 2022 hook that checks the positions health first, so it can’t be handed off in a broken state & the NFT layer is a separate program so it can never touch the funds the core engine holds.

Percolator

12,359 Aufrufe • vor 4 Monaten

Excited to publish my first skill: Prefer Container Queries It makes components respond to their container's width, not the viewport - so the same component adapts anywhere you drop it. npx skills add flornkm/skills
0:18

Excited to publish my first skill: Prefer Container Queries It makes components respond to their container's width, not the viewport - so the same component adapts anywhere you drop it. npx skills add flornkm/skills

Florian

79,209 Aufrufe • vor 2 Monaten

Design Engineering Tip Make hover interactions respond to where the cursor actually comes from. Instead of revealing content with the same animation every time, detect the cursor entry direction and move the image + content accordingly. It makes a simple card feel much more spatial and responsive. const direction = getDirection(event, ref.current); const variants = { top: { y: 20 }, bottom: { y: -20 }, left: { x: 20 }, right: { x: -20 }, };
0:16

Design Engineering Tip Make hover interactions respond to where the cursor actually comes from. Instead of revealing content with the same animation every time, detect the cursor entry direction and move the image + content accordingly. It makes a simple card feel much more spatial and responsive. const direction = getDirection(event, ref.current); const variants = { top: { y: 20 }, bottom: { y: -20 }, left: { x: 20 }, right: { x: -20 }, };

Gabriel

19,660 Aufrufe • vor 2 Monaten

None! 🙌 TVs ship as large items . No container needed. Shopping in the app? Just select the sea option and we’ll detect if the items will fit into a container or ship as a large item automatically, works even for a mixed cart, where large items ship on their own and the rest goes into a container. Buying elsewhere and sending to your locker address? Just pick the large item option when you create the shipment.
0:16

None! 🙌 TVs ship as large items . No container needed. Shopping in the app? Just select the sea option and we’ll detect if the items will fit into a container or ship as a large item automatically, works even for a mixed cart, where large items ship on their own and the rest goes into a container. Buying elsewhere and sending to your locker address? Just pick the large item option when you create the shipment.

Golly Express

16,633 Aufrufe • vor 3 Monaten

when you add fade out for the scrollable container, make sure it won't overlap your scroll bar
0:12

when you add fade out for the scrollable container, make sure it won't overlap your scroll bar

dmytro

54,436 Aufrufe • vor 11 Monaten

If you can dream it, you can build it. From a plain shipping container to a glass flower house in the wild
0:15

If you can dream it, you can build it. From a plain shipping container to a glass flower house in the wild

Architecture Presentation

207,302 Aufrufe • vor 10 Monaten

This one line of CSS will fix the annoying layout shift that scrollbars cause. This happens when a non-scrollable container becomes scrollable due to its content. This gets rid of that problem: .container { scrollbar-gutter: stable; } With that, space is reserved for the scrollbar before it even appears. So there's no layout shifts when content grows. Use both-edges if your content is centered. It mirrors the reserved space on both sides of the container to keep the layout balanced. If you found this one useful, follow for more. ❤️
0:13

This one line of CSS will fix the annoying layout shift that scrollbars cause. This happens when a non-scrollable container becomes scrollable due to its content. This gets rid of that problem: .container { scrollbar-gutter: stable; } With that, space is reserved for the scrollbar before it even appears. So there's no layout shifts when content grows. Use both-edges if your content is centered. It mirrors the reserved space on both sides of the container to keep the layout balanced. If you found this one useful, follow for more. ❤️

Ali

67,744 Aufrufe • vor 6 Monaten

✨ An example showing the power of container queries, inspired from Github. Notice that when the option is "Media," the UI items remain hidden despite sufficient space. However, when "container" is active, they are visible. Learn more:
0:16

✨ An example showing the power of container queries, inspired from Github. Notice that when the option is "Media," the UI items remain hidden despite sufficient space. However, when "container" is active, they are visible. Learn more:

Ahmad Shadeed

25,953 Aufrufe • vor 2 Jahren

came up with this idea where you can take a selfie with your position, prototyped it in a day, and it's now in the app.
0:10

came up with this idea where you can take a selfie with your position, prototyped it in a day, and it's now in the app.

Kevin Shay

87,929 Aufrufe • vor 5 Monaten

I have compiled the Top 25 of the most Successful Start-Up Landing Pages. You can use it to: • Find inspirations for your product • Learn how to position your product • Learn the Landing Page layout that works Want the figma design file? To receive, Like + Comment "FIGMA" and I'll DM it to you. (Must be following for priority)
0:12

I have compiled the Top 25 of the most Successful Start-Up Landing Pages. You can use it to: • Find inspirations for your product • Learn how to position your product • Learn the Landing Page layout that works Want the figma design file? To receive, Like + Comment "FIGMA" and I'll DM it to you. (Must be following for priority)

Alfi

64,684 Aufrufe • vor 1 Jahr

We call this feature the Graphic Design Generator. To make your own design, just set up a frame, position your text and elements exactly where you want them, type in a prompt, and hit ‘Recraft.’ Voilà — your design is ready! Try it out here: #RecraftAI #red_panda #GraphicDesignGenerator
0:16

We call this feature the Graphic Design Generator. To make your own design, just set up a frame, position your text and elements exactly where you want them, type in a prompt, and hit ‘Recraft.’ Voilà — your design is ready! Try it out here: #RecraftAI #red_panda #GraphicDesignGenerator

Recraft

84,496 Aufrufe • vor 2 Jahren