Friday 8 November 2013

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...

  1. Sign in blogger.com
  2. Choose template --> edit HTML
  3. Search  </head>  for template designer or </html>  for blogskin
  4. 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...

9 comments:

  1. dah menjadi pon :) ternyate mesti letak kode tu dibawah /head thanks akak!

    ReplyDelete
    Replies
    1. Oh memang sepatutnya selepas /head lupa nak betulkan codenye... >,<

      Delete
    2. Haha, ijin repost :) I'll give your blog url, don't worry!

      Delete
  2. Akak. ijin re-post boleh ker. Thanks la. Banner akak yang lebih cantik

    ReplyDelete
  3. Izin Repost... :) Done put credit :)

    ReplyDelete
  4. Thanks akak, bergunaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa ^^ re-post boleh? credit Keepcalm, akak, scrollbar blognya comel lah. bagaimana cara buat tu scrollbar di denim template. saya ingin. tapi nak temu2lah tutornya -_- moga2 ada tutornya dan menjadi tu scrollbar

    ReplyDelete
  5. Kok malah background nya yang ilang kka? berhasil sih. Tapi kalau backgroundnya yang enggak keliatan. Kenapa ya kak?

    ReplyDelete