Home > DeveloperSection > Forums > how to create stylish tooltip using css
Manoj Bhatt
Manoj Bhatt

Total Post:153

Points:1079
Posted on    January-25-2013 1:08 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 2022  View(s)
Rate this:
Hi Everyone!

I want to create stylish tool tip for my web project.

Thanks


AVADHESH PATEL

Total Post:604

Points:4228
Posted on    January-28-2013 8:51 AM

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>

Don't want to miss updates? Please click the below button!

Follow MindStick