Products

Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller

Developer

Article Blog Forum Interview Beginner News Startup Quiz

Users

Career

Apply Job Internship

Pricing

Login Sign Up Get a Quote

how to create stylish tooltip using css

Manoj Bhatt 3639 25 Jan 2013

Hi Everyone!
I want to create stylish tool tip for my web project.
Thanks

Ask by Manoj Bhatt

Updated 28 Jan 2013

1 Answers

AVADHESH PATEL 28 Jan 2013

Hi Manoj!
You can try below line of code for creating stylish tooltip using CSS

<style type="text/css">
        a
        {
            color: #900;
            text-decoration: none;
        }
        
        a:hover
        {
            color: red;
            position: relative;
        }
        
        a[title]:hover:after
        {
            content: attr(title);
            padding: 4px 8px;
            color: #333;
            position: absolute;
            left: 0;
            top: 100%;
            white-space: nowrap;
            z-index: 20px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            -moz-box-shadow: 0px 0px 4px #222;
            -webkit-box-shadow: 0px 0px 4px #222;
            box-shadow: 0px 0px 4px #222;
            background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
            background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
            background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
            background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
            background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
        }
    </style>

apply this css as below

<p>ToolTip is used to display some text when the mouse is <a href="#" title="move over"> move over </a> a control. This control is helpful in providing quick information when the user moves the mouse over an associated control.
</p>

MindStick Training

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.