Hey gang, in this CSS Tricks tutorial, I’ll show you how to make a CSS-only tooltip, using CSS pseudo classes and the attr() value to dynamically inject our content.

+ Repo –
+ Atom editor –

CSS Playlist –

You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress, Node.js & more on the channel homepage…


========== PSD to WordPress Playlist ==========

============ Node.js for Beginners Playlist =============

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – or

================== Social Links ==================

Twitter – @TheNetNinja –


  1. Go further and replace:
    1) 'margin-left: -8px' in .tooltip::before with 'transform: translateX(-50%)' and
    2) 'margin-left: -150px' and 'transform: translateY(-100%)' in .tooltip::after with 'transform: translate(-50%, -100%)'

  2. please do a tutorial on creating a login/ social media app with nodejs. you are the best teacher when it comes to web programming. thx

  3. Opacity is not the best way the hide elements in this case. As you can see on the end of the video, you hovered on the pseudo element accidentally, they still there and accessible.

  4. thank you mate,
    you helped me a lot. P.S. Do you know how to make a video lightbox but using jquery and css but without using plugins? Like f.e. a button which says: watch video.
    Keep on being a great Ninja!
    Peace out


Please enter your comment!
Please enter your name here