how to change tooltip style

Description
Here i explain how to modify tooltip using css. It is simple way to attractive modification and show very fast than default tooltip and other. Use to following short code to modify your tooltip in whole page or project:

First of all apply class "tooltip" with predefined attribute with value (i.e : title1="your tooltip text") to your element following below example:

<button id="btnSubmit" title1="Click to Submit" class="tooltip"></button>

After that, now add below style in your page for modify tooltip styles. Also you can decoration tooltip text as you like and so many.

 <style type="text/css">      
        .tooltip

        {

            display: inline;

            position: relative;

        }

       

        .tooltip:hover

        {

            color: #c00;

            text-decoration: none;

        }

       

        .tooltip:hover:after

        {

            background: rgba(0,0,0,.8);

            border-radius: .5em;

            bottom: 0em;

            color: #fff;

            content: attr(title1);

            /* title1 is tooltip value contained with class tooltip */

            display: block;

            padding: .3em 1em;

            position: absolute;

            text-shadow: 0 1px 0 #000;

            white-space: nowrap;

            z-index: 98;

            left: 2em;

        }

       

        .tooltip:hover:before

        {

            border: solid;

            border-color: #111 transparent;

            border-width: .4em .4em 0 .4em;

            bottom: 0.6em;

            content: "";

            display: block;

            left: 1.4em;

            position: absolute;

            z-index: 99;

            transform: rotate(90deg);

        }
 </style>