Tooltip Rainbow

Tooltip is a graphic box float when a visitor hovers the pointer item without clicking it.
I will share how to create a tooltip rainbow.

Template
edit html
place the following CSS code above ]]></b:skin>


#s-m-t-tooltip {
    background: url(http://dl3.glitter-graphics.net/pub/2725/2725413buoul6giov.gif);/* change the background image or another rainbow image or color as u want */
    font-size: 9px;/* change the font size */
    line-height: 11px;
    font-family: cambria;/* change the font */
    letter-spacing: 2px;
    text-transform: lowercase;/* can be lowercase, uppercase, none */
    color: #fff;/* change the text color */
    text-align: center;
    padding: 5px 10px 5px 10px;
    display: block;
    border-radius: 5px;
    margin: 24px 14px 7px 12px;
  }

You can change the url of the background, font size, font style as you like

Next, place the following script code above </head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<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>