forum

home / developersection / forums / how to create stylish tooltip using css

Ask Question

how to create stylish tooltip using css

Manoj Bhatt 3506 25-Jan-2013
Hi Everyone!

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

Thanks
css-css3 css-css3 
Updated on 28-Jan-2013
Manoj Bhatt

Other

Message
Can you answer this question?
Answer

1 Answers

AVADHESH PATEL

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>
advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy