33 Free CSS Tooltip Styles 2026 Tooltips are one of the most useful UI patterns for adding contextual help without cluttering your interface. ProofMatcher's free tooltip library has 33 CSS tooltip designs — all with HTML, CSS and React code, no signup required. Basic Arrow Tooltip The classic approach uses CSS ::before and ::after pseudo-elements to create the tooltip bubble and arrow: .tooltip-wrap { position: relative; display: inline-block; } .tooltip-wrap::after { content: attr(data-tip); po