Responsive and Mobile-Friendly Tooltip — Osvaldas Valutis

Sexy Tooltips with Just CSS Providing supplementary information about potentially complex elements of a user interface is a central part of any website designer or developer’s workflow in creating usable and accessible websites. One of the most common mechanisms for providing extra details beyond what you can see on the page is the tooltip (a design pattern for showing tips about a particular element on a screen). While many innovative solutions exist using CSS and JavaScript (with and without JavaScript frameworks like jQuery), it’s sometimes useful to look towards new technologies to examine the impact they may have on our current techniques. Thus, we’re going to look at how using the evolving CSS standard can enhance some lovely cross-browser tooltips. Demonstration of the Sexy Tooltips Check out the demo page of the pure CSS tooltip we’ll be creating. Live demo Download the Sexy Tootips Source Files If you’d like the source code to use and follow along, download it below. css-tooltips (ZIP, 18.8 KB) CSS3 Extras <!