Sticky Tooltip Widget For Blogger

The new generation of webdesign has seen a lots dynamic and 3D effects, unfortunately since you are hosting on the blogger platform, it does seems like you are not entitled to enjoy those features, however, we are doing our best to ensure that our readers are upto date with the latest website feature irrespective of the platform the are operating. Today, we shall take a look at one of the most recent development of webdesign and I can assure you that ELITES readers will be first to use this terrific effect.

The sticky tooltip is a css/javascript effect that adds a rich HTML tooltip to elements that’s revealed when the mouse rolls over them, in which the tooltip follows the cursor around as it moves about within the element. The tooltip can be “stickied”, or kept visible on the screen by right clicking on pressing “s” should the user wish to interact with some content within the tooltip, such as click a link inside it.

The contents for each tooltip are simply defined as regular HTML on the page, making them very easy to define and customize. Throw in a subtle fade in effect, and you’ve got yourself a tooltip that can do more than just show extra information, but serve it as well!

Demo (move your mouse over, right click/ press “s” to sticky tooltip):
Some page contents here…
Thailand
British Columbia
London
Some page contents here…


Thailand boasts some of the most popular and luxurious resorts in Asia.

BC is the westernmost of Canada’s provinces and is famed for its natural beauty.Vancouver is BC’s largest city.

This is a demo test for sticky tooltip by E.O Uwazie is Check  it out.

This widget was originally produced by Dynamic Drive and bloggerized Elites World Technology.

Add Sticky Tooltip to Blogger

  •     Login to your blogger account
  •     Click on template
  •     Click on Edit html
  •     Just above ]]></b:skin> paste the following code:

/********** STICKY TOOLTIP BY ELITES WORLD TECHNOLOGY*************/
.stickytooltip{
box-shadow: 5px 5px 8px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
display:none;
position:absolute;
display:none;
border:5px solid black; /*Border around tooltip*/
background:white;
z-index:3000;
}
.stickytooltip .stickystatus{ /*Style for footer bar within tooltip*/
background:black;
color:white;
padding-top:5px;
text-align:center;
font:bold 11px Arial;
}
  •       Find </head> and paste the following code above it:


<script type='text/javascript'>
//<![CDATA[
/* Sticky Tooltip Blogger Widget (v1.0)
* Created: June 22nd, 2013. This notice must stay intact for usage
* Author: ELITES WORLD TECHNOLOGY at https://ewtnet.com/
* Visit https://ewtnet.com/ for full source code
*/
var stickytooltip={
tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
fadeinspeed: 200, //duration of fade effect in milliseconds
rightclickstick: true, //sticky tooltip when user right clicks over the triggering element (apart from pressing "s" key) ?
stickybordercolors: ["black", "darkred"], //border color of tooltip depending on sticky state
stickynotice1: ["Press \"s\"", "or right click", "to sticky box"], //customize tooltip status message
stickynotice2: "Click outside this box to hide it", //customize tooltip status message
//***** NO NEED TO EDIT BEYOND HERE
isdocked: false,
positiontooltip:function($, $tooltip, e){
var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(),
x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(stickytooltip.tooltipoffsets[0]*2) : x
y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
$tooltip.css({left:x, top:y})
},
showbox:function($, $tooltip, e){
$tooltip.fadeIn(this.fadeinspeed)
this.positiontooltip($, $tooltip, e)
},
hidebox:function($, $tooltip){
if (!this.isdocked){
$tooltip.stop(false, true).hide()
$tooltip.css({borderColor:'black'}).find('.stickystatus:eq(0)').css({background:this.stickybordercolors[0]}).html(this.stickynotice1)
}
},
docktooltip:function($, $tooltip, e){
this.isdocked=true
$tooltip.css({borderColor:'darkred'}).find('.stickystatus:eq(0)').css({background:this.stickybordercolors[1]}).html(this.stickynotice2)
},
init:function(targetselector, tipid){
jQuery(document).ready(function($){
var $targets=$(targetselector)
var $tooltip=$('#'+tipid).appendTo(document.body)
if ($targets.length==0)
return
var $alltips=$tooltip.find('div.atip')
if (!stickytooltip.rightclickstick)
stickytooltip.stickynotice1[1]=''
stickytooltip.stickynotice1=stickytooltip.stickynotice1.join(' ')
stickytooltip.hidebox($, $tooltip)
$targets.bind('mouseenter', function(e){
$alltips.hide().filter('#'+$(this).attr('data-tooltip')).show()
stickytooltip.showbox($, $tooltip, e)
})
$targets.bind('mouseleave', function(e){
stickytooltip.hidebox($, $tooltip)
})
$targets.bind('mousemove', function(e){
if (!stickytooltip.isdocked){
stickytooltip.positiontooltip($, $tooltip, e)
}
})
$tooltip.bind("mouseenter", function(){
stickytooltip.hidebox($, $tooltip)
})
$tooltip.bind("click", function(e){
e.stopPropagation()
})
$(this).bind("click", function(e){
if (e.button==0){
stickytooltip.isdocked=false
stickytooltip.hidebox($, $tooltip)
}
})
$(this).bind("contextmenu", function(e){
if (stickytooltip.rightclickstick && $(e.target).parents().andSelf().filter(targetselector).length==1){ //if oncontextmenu over a target element
stickytooltip.docktooltip($, $tooltip, e)
return false
}
})
$(this).bind('keypress', function(e){
var keyunicode=e.charCode || e.keyCode
if (keyunicode==115){ //if "s" key was pressed
stickytooltip.docktooltip($, $tooltip, e)
}
})
}) //end dom ready
}
}
//stickytooltip.init("targetElementSelector", "tooltipcontainer")
stickytooltip.init("*[data-tooltip]", "mystickytooltip")
//]]></script>

  •     Now save your changes and click on layout.
  •     Add a new Javascript/HTML widget where you want your tooltip to appear.
  •     Copy the following code into the widget and save:


<p>Write Something Here...</p>
<p><a href="http://en.wikipedia.org/wiki/Thailand" data-tooltip="sticky1">Thailand</a></p>
<p><a href="http://en.wikipedia.org/wiki/British_columbia" data-tooltip="sticky2">British Columbia</a></p>
<p><img src="http://img403.imageshack.us/img403/3403/redleaves.jpg" data-tooltip="sticky3" /></p>
<p>Write Something Here...</p>
<!--HTML for the tooltips-->
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">
<div id="sticky1" class="atip" style="width:200px">
<img src="http://img121.imageshack.us/img121/746/thailand.jpg" /><br />
Thailand boasts some of the most popular and luxurious resorts in Asia.
</div>
<div id="sticky2" class="atip" style="width:262px">
<img src="http://img686.imageshack.us/img686/7383/vancouver.jpg" /><br />BC is the westernmost of Canada's provinces and is famed for its natural beauty.<b><a href="http://en.wikipedia.org/wiki/Vancouver">Vancouver</a></b> is BC's largest city.
</div>
<div id="sticky3" class="atip">
<img src="http://img339.imageshack.us/img339/2488/redleaveslarge.jpg" />
</div>
</div>
<div class="stickystatus">
</div>
</div>

Note: All tooltips on the page should be defined inside a single DIV, with each DIV itself wrapped around a DIV with a unique ID attribute. The basic structure is:

<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">
<div id="sticky1">
Sticky Tooptip 1 content here...
</div>
<div id="sticky2">
Sticky Tooptip 2 content here...
</div>
<div id="sticky3">
Sticky Tooptip 3 content here...
</div>
</div>
<div class="stickystatus">
</div>
</div>

Enjoy!

Did you get the answer you were searching for?

Save hours of searching online or wasting money testing unnecessary plugins, get in touch with me and let's discuss a suitable plan for your project. Best thing about this service is that you are never placed on hold and get to talk to an expereinced Oxwall/Skadate developer.

Get Answers for Free!

Ask a question related to this topic and get immediate answers from other community members in 48hrs or less. Contribute by answering members questions.

Ask Question
Premium Service

Whether it's a custom plugin, theme or dedicated support needed to get you started on your project, get professional 24/7 support tailored to your need.

Get in Touch

Or just leave a comment...

Leave a Reply