HOW TO CREATE STYLISH TOOLTIP USING CSS

Manoj Bhatt

Total Post:154

Points:1086
Posted by  Manoj Bhatt
 2399  View(s)
Ratings:
Rate this:
Hi Everyone!

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

Thanks
  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: how to create stylish tooltip using css

    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>

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!