how to create stylish tooltip using css

Total Post:154


 2889  View(s)
Rate this:
Hi Everyone!

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

  1. 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">
                color: #900;
                text-decoration: none;
                color: red;
                position: relative;
                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);

    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.

      Modified On Mar-29-2018 06:13:46 AM


Please check, If you want to make this post sponsored

You are not a Sponsored Member. Click Here to Subscribe the Membership.