Tooltip stanowi część graficznego interfejsu, zwykle widoczny jest dopiero w momencie kiedy najedziemy kursorem myszy na posiadający element np. przycisk, link. Tooltip za zwyczaj wygląda jak mała „chmurka” lub „dymek” zawierający uwagi, komentarze dotyczące danego elementu. Poniżej znajdziecie kilka inspiracji, które pomogą wam znaleźć miejsce na ten efekt w waszych witrynach.
Co znajdziesz w tym wpisie
- 1 Positioning a Tooltip on an SVG
- 2 tooltip
- 3 Social Icons with Tooltip
- 4 :focus tooltip
- 5 bootsrapt progress-bar with tooltip
- 6 Pure CSS Tooltips
- 7 CSS ToolTip Smooth animation
- 8 Tooltips
- 9 SVG Doughnut chart with animation and tooltip
- 10 awTooltip
- 11 Tooltip Pagination
- 12 Animated CSS Tooltips
- 13 Simple CSS Tooltips — Interactive Example #codevember
- 14 Bootstrap setting for tooltip and popover
- 15 Warcraft Tooltips
Positioning a Tooltip on an SVG
autor: Amelia Bellamy-Royds
See the Pen
Positioning a Tooltip on an SVG by Amelia Bellamy-Royds (@AmeliaBR)
on CodePen.
tooltip
autor: Oleg Shilov
See the Pen tooltip by Oleg Shilov (@olegshilov) on CodePen.0
autor: Jon Milner
See the Pen Social Icons with Tooltip by Jon Milner (@jonmilner) on CodePen.0
:focus tooltip
autor: Victor Pegado
See the Pen :focus tooltip by Victor Pegado (@vpegado) on CodePen.0
bootsrapt progress-bar with tooltip
autor: Ahmet Gür
See the Pen bootsrapt progress-bar with tooltip by Ahmet Gür (@valencia123) on CodePen.0
Pure CSS Tooltips
autor: John Fink
See the Pen Pure CSS Tooltips by John Fink (@SkyHyzer) on CodePen.0
CSS ToolTip Smooth animation
autor: Omar Dsoky
See the Pen CSS ToolTip Smooth animation by Omar Dsoky (@linux) on CodePen.0
Tooltips
autor: Yoann Nouveau
See the Pen Tooltips by Yoann Nouveau (@YoannN2) on CodePen.0
SVG Doughnut chart with animation and tooltip
autor: Hiro
See the Pen SVG Doughnut chart with animation and tooltip by Hiro (@githiro) on CodePen.0
awTooltip
autor: adobewordpress
See the Pen awTooltip by adobewordpress (@adobewordpress) on CodePen.0
Tooltip Pagination
autor: Joe
See the Pen Tooltip Pagination by Joe (@dope) on CodePen.0
Animated CSS Tooltips
autor: runnabro
See the Pen Animated CSS Tooltips by runnabro (@runnabro) on CodePen.0
Simple CSS Tooltips — Interactive Example #codevember
autor: Jase
See the Pen Simple CSS Tooltips — Interactive Example #codevember by Jase (@jasesmith) on CodePen.0
Bootstrap setting for tooltip and popover
autor: Monkey Raptor
See the Pen Bootstrap setting for tooltip and popover by Monkey Raptor (@monkeyraptor) on CodePen.0
Warcraft Tooltips
autor: Simon Goellner
See the Pen Warcraft Tooltips by Simon Goellner (@simeydotme) on CodePen.0
