Composants

tooltip

Explorez les aperçus interactifs, trouvez les bons composants et intégrez les composants ouverts à votre projet avec leur code source.

Créer à partir d’un guide Connectez votre agent Explorer les modèles de pages

36 sur 37

Chargement de l’index de recherche complet.

Area chart lite

1525Area chart liteGraphiquesUn graphique en aires SVG réactif avec des graduations à axe rond, un remplissage dégradé, un réticule qui lit l'échantillon sous le pointeur et un volet de dessin.

Dock menu

1528Dock menuNavigationUn dock inférieur dont les icônes prennent leur taille en fonction de la distance du pointeur, avec une étiquette au-dessus de l'icône sous le curseur et un point sous celle active.

Hover preview popover

1779Hover preview popoverCartesUne petite carte détaillée qui s'ouvre à côté d'un lien après un court survol et reste ouverte suffisamment longtemps pour y déplacer le pointeur.

Gradient Area Chart

1860Gradient Area ChartGraphiquesDeux séries mensuelles empilées dessinées sous forme de zones lisses dont les remplissages s'estompent d'une teinte forte au bord supérieur jusqu'à presque clair à la ligne de base.

Inline term preview

1866Inline term previewCartesUn terme souligné dans le corps du texte qui ouvre un petit panneau de définition au survol ou au focus, en s'agrandissant à partir du coin le plus proche du terme.

Smooth Area Trend

1888Smooth Area TrendGraphiquesUn graphique à zones d'une seule série avec un bord supérieur légèrement incurvé, un remplissage légèrement teinté, un quadrillage horizontal pâle et une lecture qui suit le pointeur.

Straight Segment Area Chart

1908Straight Segment Area ChartGraphiquesUn graphique en aires d'une seule série construit à partir de segments droits entre des points, de sorte que le contour se lit comme une polyligne à facettes nettes au lieu d'une courbe.

1917Avatar Lineup HoverAffichage des donnéesUne rangée de cercles d'avatar qui se chevauchent où le survol de l'un d'entre eux le soulève au-dessus de ses voisins et révèle une info-bulle de nom.

1918Avatar StackAffichage des donnéesUne rangée d'avatars circulaires superposés qui sépare et soulève celui sous le pointeur, révélant une info-bulle de nom au-dessus.

Flip Side Hint Tooltip

1960Flip Side Hint TooltipSuperpositionsUne bulle d'indice qui apparaît au survol ou au focus clavier et se retourne automatiquement dans n'importe quel côté la maintient entièrement visible près du bord de l'écran.

Flow Area Chart

1961Flow Area ChartGraphiquesUn graphique en aires de séries chronologiques avec un remplissage dégradé qui se dessine au chargement et affiche un réticule avec une info-bulle de valeur au survol.

Instant Hint Tooltip

1983Instant Hint TooltipSuperpositionsUne petite étiquette qui s'estompe et s'agrandit à côté d'un élément en survol ou au clavier, donnant un indice rapide sans ajouter d'encombrement visible.

Candle Price Chart

2086Candle Price ChartGraphiquesUn graphique en chandeliers OHLC avec des bougies colorées de haut en bas, une mèche par période et une info-bulle de survol indiquant l'ouverture, le haut, le bas et la clôture.

Timeline scatter chart

2095Timeline scatter chartGraphiquesUn nuage de points de séries chronologiques où chaque lecture est un petit marqueur annulaire, apparaissant lors du chargement et atténuant ses voisins lorsque vous survolez un point dans le temps.

Traveling Toolbar Tooltip

2096Traveling Toolbar TooltipSuperpositionsUne seule info-bulle flottante qui glisse doucement d'une icône de la barre d'outils à l'autre lorsque le survol ou le focus se déplace entre elles, au lieu de disparaître et de réapparaître à chaque fois.

Gridline area chart

2099Gridline area chartGraphiquesUn graphique en aires encadré par une carte avec deux couches remplies qui se chevauchent, des graduations d'axe arrondies, un léger quadrillage et une ligne de pied de page annonçant la tendance.

Scrubbing tooltip chart

2102Scrubbing tooltip chartGraphiquesUn graphique linéaire avec un réticule à ressort, un point de valeur collé à la ligne, un panneau flottant qui retourne les côtés près des bords et une pilule de date en bas.

Themed chart frame

2103Themed chart frameGraphiquesUn cadre de graphique à barres groupées réutilisable qui donne à chaque série une couleur cohérente, une info-bulle flottante stylisée et une légende qui atténue les autres séries au survol.

Cursor-chasing tooltip

2137Cursor-chasing tooltipSuperpositionsUne bulle d'indice qui apparaît lors du survol ou de la mise au point et peut glisser pour suivre le pointeur lorsqu'il se déplace sur le déclencheur.

Resizing hint tooltip

2214Resizing hint tooltipSuperpositionsUne étiquette de survol dont la bulle se redimensionne automatiquement lorsque son texte est plus long ou plus court, au lieu de passer d'une taille à l'autre.

2257Toolbar icon tooltipSuperpositionsUne rangée de boutons de barre d'outils composés uniquement d'icônes qui font apparaître une petite étiquette en forme de flèche à proximité de celui survolé ou mis au point.

Step area chart

2276Step area chartGraphiquesUn graphique en aires à série unique dessiné comme un escalier où chaque valeur est maintenue à plat sur son emplacement et saute verticalement à la limite.

Category dot line

2287Category dot lineGraphiquesUne seule courbe lisse répartie sur cinq catégories nommées où chaque marqueur de point est coloré à partir d'une rampe d'accentuation en teinte, de sorte que les marqueurs font également office de légende.

Named point line

2291Named point lineGraphiquesUne ligne répartie sur cinq catégories qui imprime le nom de chaque catégorie au-dessus de son point au lieu d'un nombre, laissant la valeur au survol.

Dotted Trend Line

2294Dotted Trend LineGraphiquesUne courbe lisse en série unique avec un marqueur rempli sur chaque point et un marqueur annelé qui s'aligne sur le point le plus proche du pointeur.

Donut share chart

2336Donut share chartGraphiquesUn beignet à cinq tranches avec un centre creux et des espaces vides qui s'ouvrent sur le support et se soulèvent selon la tranche sur laquelle se trouve le pointeur.

2382Magnifying icon dockNavigationUn dock de style macOS composé de boutons d'icônes circulaires qui s'agrandissent doucement à mesure que le pointeur s'en approche et révèlent une étiquette au-dessus de l'icône active.

Paired Series Line

2397Paired Series LineGraphiquesDeux séries lissées sur les mêmes mois sur une échelle partagée, avec un guide de survol qui lit les deux valeurs côte à côte dans un seul panneau.

Plain Share Pie

2403Plain Share PieGraphiquesL'essentiel d'un diagramme circulaire : cinq tranches affleurantes, un fin trait de division et une info-bulle de survol, sans rien d'autre ajouté.

Spoke area chart

2436Spoke area chartGraphiquesUn tracé polaire où les rayons étiquetés portent une série sous la forme d'une forme fermée translucide sur une grille polygonale, avec une lecture qui s'aligne sur le rayon le plus proche.

Stepped Value Line

2444Stepped Value LineGraphiquesUne série unique dessinée sous forme de courses plates et de sauts verticaux, la forme souhaitée lorsqu'une valeur reste stable jusqu'à ce qu'elle change.

Dashed outline tooltip button

2536Dashed outline tooltip buttonBoutonsUn bouton fantôme en pointillés qui inonde de son accent lors du survol ou de la mise au point tandis qu'une info-bulle pointue se déroule hors du bord le plus proche du bouton.

2554Rising tooltip icon buttonBoutonsUn bouton icône sans chrome dont le glyphe gonfle et devient de couleur d'avertissement au survol tandis qu'une petite puce d'étiquette s'élève au-dessus après un court délai.

2657Tooltip tint icon rowBoutonsUne rangée de boutons d'icônes circulaires dont le survol soulève une bulle étiquetée au-dessus et inonde les deux dans la propre teinte de cet élément.

Download tooltip button

2697Download tooltip buttonBoutonsUn bouton d'icône carré dont la flèche de téléchargement se déplace vers le bas et prend la couleur d'accent tandis qu'une légende de la taille d'un fichier se déroule en dessous.

2698Icon swell tooltipBoutonsUn bouton icône sans chrome dont le glyphe gonfle et se recolore au survol tandis qu'une puce d'étiquette se déploie au-dessus de lui depuis son bord gauche.

Comparer ces composants

Choisissez selon le comportement et la mise en page, puis vérifiez les frameworks disponibles et les conditions d’accès sur la page de chaque composant.

Area chart lite
Un graphique en aires SVG réactif avec des graduations à axe rond, un remplissage dégradé, un réticule qui lit l'échantillon sous le pointeur et un volet de dessin.
Avatar Lineup Hover
Une rangée de cercles d'avatar qui se chevauchent où le survol de l'un d'entre eux le soulève au-dessus de ses voisins et révèle une info-bulle de nom.
Avatar Stack
Une rangée d'avatars circulaires superposés qui sépare et soulève celui sous le pointeur, révélant une info-bulle de nom au-dessus.

Conseils de design

Ouvrir l’index complet

Étiquettes

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)admin (12)agent (12)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)billing (10)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (7)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (4)columns (3)combobox (4)command palette (3)commercial (10)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)controlled-state (18)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)customer (13)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)data (13)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (13)finance (10)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (50)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)log (3)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)product (6)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (4)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)retry (3)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (21)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)workflow (18)workspace (36)wrapper (3)zoom (4)