CSS Tooltip Generator

Pure CSS • Hover-Triggered • No JavaScript Needed

Border Radius6px
Font Size13px
Distance from Trigger8px
Arrow Size6px
Fade Duration0.2s
Live Preview — Hover the Button
HTML Code

                    


                    

                        

                            
 CSS Code

                            
                        

                        

                    

                

            

                    
        

    


    
    

        

            
 About

            
 Contact

        

        

            
About CSS Tooltip Generator

            
This tool builds a hover tooltip using only CSS — no JavaScript is needed on your site. It works by reading the text from a data-tooltip attribute you add to any element, and displaying it through a ::after pseudo-element bubble plus a ::before pseudo-element arrow, both revealed on :hover. The arrow always points toward the trigger element using the classic CSS border-triangle technique, and its direction is automatically the opposite of the bubble's position (a tooltip above the trigger has an arrow pointing down, for example). The fade uses opacity and visibility together rather than display: none, since display cannot be transitioned — this is what makes the fade-in smooth instead of an instant snap. Choose a position, customize colors, sizing, and timing, then copy the HTML and CSS. All processing happens locally in your browser.