Tooltips code

This instruction helps to install Tooltips in webpages.


Tooltips Code:

In Blogger template
Log in Blogger => Design => Edit HTML => Check (mark)  Expand Widget Templates

Find </head> [ To find use Ctrl + F => Search box appear top right side = Type </head> => Hit Enter ]
Paste Following code Just above </head>. [To select all, click inside box => Ctrl+A]
<style type='text/css'> a.tooltip{ position:relative; text-decoration: none; } a.tooltip span{display: none; } a.tooltip:hover span{ display:block; position:absolute; padding: 5px; width:400px; border:1px solid #357EC7; background-color:#CFECEC; filter:alpha(opacity=90); opacity:0.9; color:#000000; </style>

Now click SAVE TEMPLATE

  This is tooltips code install in blogger templates. Now you can show tooltips wherever you want in new pages or post insert following code to show tooltips in desire section or location.

<a href="#" class="tooltip">DEMO<span>This is tool tips example</span></a>

DEMOThis is tool tips example
You can change Tooltips features:


top:20px; left:20px;
padding: 5px;
width:400px; ( Tooltips bredth can be modified by changing this number )
border:1px solid #357EC7; ( Tooltips border and color modification )
background-color:#CFECEC; ( Background of tooltips can be modified by changing this color code)
filter:alpha(opacity=90); ( Transparency of Tooltips can be modified by this no. high no. low transparency )
opacity:0.9;
color:#000000;

For HTML Color Code CLICK THIS LINK