how to stilize title property css

1/* use for any tag on your page */
2[data-title]:hover:after {
3    opacity: 1;
4    transition: all 0.1s ease 0.5s;
5    visibility: visible;
6}
7/* box for title text */
8[data-title]:after {
9    content: attr(data-title);
10  	/* position for title view box */
11  	position: absolute;
12  	bottom: -1.6em;  	
13    left: 100%;
14    z-index: 99999;
15    visibility: hidden;
16    /* optional */
17    white-space: nowrap;
18  	/* stilization */
19    background-color: #00FF00;
20    color: #111;
21    font-size: 150%;
22    padding: 1px 5px 2px 5px;
23    box-shadow: 1px 1px 3px #222222;
24    opacity: 0;
25    border: 1px solid #111111;
26}
27[data-title] {
28    position: relative;
29}
30
31/* on html page in your tags */
32/* 
33<a href="example.com" data-title="My site"> Link </a> with styled tooltip (bigger and with a different background color, as requested in the question)<br/>
34<a href="example.com" title="My site"> Link </a> with normal tooltip
35*/
36
37