Tutorial: Customize tooltips

Assalamualaikum dan hai semua ! dah lama tak update entri...sebelum nie ada ujian akhir tahun, kenalah study sebab tahun depan dah nak SPM...

Okay this time I want to make a tutorial on how to customize tooltip...Tooltip is a title of link

Example of the default tooltips

Follow below steps to customize the tooltips...

Sign in blogger.com
Choose template --> edit HTML
Search </head> for template designer or </html> for blogskin
Copy below code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips();
});
})(jQuery);
</script>

Paste the code after / below </head> for template designer and after </html> for blogskin

5. search ]]></b:skin> for template designer or </style> for blogskin
6. Copy any code below and paste it before / above the code that you search

Style 1

.tooltip{
display: inline;
position: relative;
}

#s-m-t-tooltip {

min-width:70px; /*the smallest the tooltip can be*/

max-width:300px; /*the biggest the tooltip can be*/
background: #F1F6FF;/* change the background color */

font-size: 10px;/* change the font size */

line-height: 13px;

box-shadow:inset 0px 0px 2px 2px #E6EEFF;

font-style:italic;

font-family: Georgia;/* change the font */

letter-spacing: 2px;

text-transform: lowercase;/* can be lowercase, uppercase, none */

color: #222222;/* change the text color */

text-align: center;

padding: 3px 4px 3px 6px;

display: block;

z-index: 100;

border-radius: 5px;

position: absolute;

margin-left:10px;

margin-top:16px;

}

Style 2

.tooltip{
display: inline;
position: relative;

}
#s-m-t-tooltip {

min-width:70px; /*the smallest the tooltip can be*/

max-width:300px; /*the biggest the tooltip can be*/

-moz-border-radius:5px;border-radius:5px;

-webkit-border-radius:5px; /*change your border radius*/

padding: 3px 4px 3px 6px; /*padding inside tooltip*/

margin:25px 0px 0px 25px; /*distance from link, adjust triangle bottom value if you fiddle with this*/

background: #aaebd1; /*background color*/

font-family:calibri; /*tooltip font*/

font-size:10px; /*tooltip font size*/

letter-spacing:2px; /*tooltip letter spacing*/

text-transform:uppercase; /*makes the tooltip title uppercase*/

color:#000000; /*tooltip font color*/

text-align: center;

-webkit-box-shadow: 2px 2px 3px #eeeeee;

-moz-box-shadow: 2px 2px 3px #eeeeee;

box-shadow: 2px 2px 3px #eeeeee;

}

#s-m-t-tooltip:after {

position: absolute;

display: block;

content: "";

border-color: transparent transparent #aaebd1 transparent ;

border-style: solid;

border-width: 12px; /*changes size of triangle*/

height:0;

width:0;

position:absolute;

bottom: 16px;

left:3px;

}

Style 3

.tooltip{
display: inline;
position: relative;
}
#s-m-t-tooltip {

min-width:70px; /*the smallest the tooltip can be*/

max-width:300px; /*the biggest the tooltip can be*/

background: #EEDFC3;/* change the background color */
font-size: 10px;/* change the font size */
line-height: 14px;
box-shadow:inset 0px 0px 2px 2px #FFB4BB;
font-family: Tahoma;/* change the font */
letter-spacing: 2px;
text-transform: lowercase;/* can be lowercase, uppercase, none */
color: #222222;/* change the text color */
text-align: center;
padding: 3px 4px 3px 6px;
display: block;
z-index: 100;border:none;
position: absolute;
margin-left:30px;
margin-top:20px;
}
#s-m-t-tooltip:before {
position: absolute;
display: block;
content: "";
border-color: transparent #FFB4BB transparent transparent ;
border-style: solid;
border-width: 10px; /*changes size of triangle*/
height:0;
width:0;
position:absolute;
bottom: 0px;
left:-20px;
}

Style 4

.tooltip{
display: inline;
position: relative;
}
#s-m-t-tooltip {

min-width:70px; /*the smallest the tooltip can be*/

max-width:300px; /*the biggest the tooltip can be*/

background-color: #EA9D9D;/* change the background color */
font-size: 10px;/* change the font size */
line-height: 14px;
box-shadow: 2px 2px 2px 1px #FFC0C0;
font-family: Tahoma;/* change the font */
letter-spacing: 2px;
text-transform: uppercase;/* can be lowercase, uppercase, none */
color: #FFFFFF;/* change the text color */
text-align: center;
padding: 3px 5px;
display: block;
border-radius:0px 6px;
z-index: 100;border:none;
position: absolute;
margin-left:20px;
margin-top:20px;
}

Edit the code :
Color code here

Red text : Color of the background

Purple text : Color of the text
Fuchsia text : Font name
Orange text : Box shadow color

How to use tool tips?

Copy below code and paste it anywhere you want it to appear...

<a href="http://kawaiilady.blogspot.com/" title="KawaiiLady ♥">Hover here !</a>

Or for image :
<img src='IMAGE URL' style='border:0px; box-shadow:0px 0px #ffffff;' title='Title Tooltip'/>

The blue highlighted text : the link...
The pink highlighted text : the title of the tooltips...
Hover here change with the text that you want to add tooltip title
Image URL change with the image that you want to add tooltip title

Okay then, preview and save when you're done... ^^
Any questions ? comments below...