15 ciekawych zastosowań tooltip dla twojej strony
Tooltip stanowi część graficznego interfejsu, zwykle widoczny jest dopiero w momencie kiedy najedziemy kursorem myszy na posiadający element np. przycisk, link.
Co znajdziesz w tym wpisie
- 1 Przykładowe zastosowania i wykonania tooltip
- 1.1 Positioning a Tooltip on an SVG
- 1.2 tooltip
- 1.3 Social Icons with Tooltip
- 1.4 :focus tooltip
- 1.5 bootsrapt progress-bar with tooltip
- 1.6 Pure CSS Tooltips
- 1.7 CSS ToolTip Smooth animation
- 1.8 Tooltips
- 1.9 SVG Doughnut chart with animation and tooltip
- 1.10 awTooltip
- 1.11 Tooltip Pagination
- 1.12 Animated CSS Tooltips
- 1.13 Simple CSS Tooltips — Interactive Example #codevember
- 1.14 Bootstrap setting for tooltip and popover
- 1.15 Warcraft Tooltips
Przykładowe zastosowania i wykonania tooltip
Tooltip to taka mała etykieta, „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.
Positioning a Tooltip on an SVG
autor: Amelia Bellamy-Royds
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