follow us

» » » » How To Add Together Jquery Tooltip To Blogger
, ,

How To Add Together Jquery Tooltip To Blogger


jQuery tooltip plugin is swell tool to explicate a lot from a unmarried word.You tin easily implement this inward your spider web log also it is real slowly to use.You tin highlight unopen to words as well as add together a tooltip to them,when whatever user hovers on the discussion a smoothen tooltip volition look only higher upwards of the highlighted discussion alongside your description.This jQuery tooltip is designed by nettuts+ and I convey reshared it on Helper Blogger.Now lets come across how to add together it as well as purpose it,

How To Add JQuery Tooltip To Blogger?

As I mentioned higher upwards the installation as well as usage of the tooltip is real easy,you only convey to position unopen to code inward your template,just follow below uncomplicated steps.

1. Adding Tooltip Scripts

  1. Go to Blogger Dashboard > Template
  2. Download a re-create of your template
  3. Click on Edit HTML
  4. Hit Proceed button
  5. Find for below code inward your template

1
</head>

add below code only higher upwards it,

1
2
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.helperblogger.com/jquery-tooltip.js"></script>

Note - If you lot convey already added a jQuery plugin to your spider web log as well as hence don't add together the start trouble from higher upwards code.

2. Adding Tooltip Styles


Find below code inward your template,

1
]]></b:skin>

add below code only higher upwards it,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.tip {
    width: 212px;
    padding-top: 37px;
    overflow: hidden;
    display: none;
    position: absolute;
    z-index: 500;
    background: transparent url(https://lh6.googleusercontent.com/-0KM2ludeMBo/UALZZEBrqBI/AAAAAAAACmc/s-SnyEbuwR8/s1600/hb_tipTop.png) no-repeat top;
}
 
.tipMid {
    background: transparent url(https://lh4.googleusercontent.com/-Vu0rxFVABjQ/UALZYWnIryI/AAAAAAAACmY/M6hXn5zozh4/s1600/hb_tipMid.png) repeat-y;
    padding: 0 25px 20px 25px;
}
 
.tipBtm {
    background: transparent url(https://lh3.googleusercontent.com/-fcuks1eGyhM/UALZXjVS6CI/AAAAAAAACmQ/GZF8z7d7S4c/s1600/hb_tipBtm.png) no-repeat bottom;
    height: 32px;
}

3. Using The Tooltip


If you lot desire to add together tooltip inward blogger posts,then instruct to Edit HTML tab as well as add together below code within it.

1
<div class="tTip" title="Add Tooltip Message Here">Add Your Text Here</div>


  • Replace Add Tooltip Message Here with the message which you lot desire to look inward tooltip.
  • Replace Add Your Text Here with the text on which you lot desire to look tooltip.

That's it done...

 Please, instruct out your comments below.
Share on Facebook
Share on Twitter
Share on Google+
Share on LinkedIn
close[CLICK 2x UNTUK MENUTUP]