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>

If you already have a jQuery script code. This code is not included.

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/> 

Save the template and see the results. Good luck, may be useful.