Here’s a basic implementation of tooltips with Protaculous. You have your choice of fading tooltips or quick-flashing tooltips. The effect will apply to any link that has a Title attribute applied to it, so you first need to edit each of your links that you want to have the effect, and use the Hyperlink dialog to add a Title attribute.
Apply Protaculous to the page, choose prototype-packed as the library, and paste in the following in the top Function Body dialog:
$$('a').each(function(elm){
var title = elm.readAttribute('title');
if(!!title){
elm.writeAttribute('title',null);
elm.setStyle('position:relative');
var tip = new Element('span',{'class':'tooltip'});
tip.update(title).hide();
elm.insert(tip);
elm.observe('mouseover', function(evt){
tip.show();
});
elm.observe('mouseout', function(evt){
tip.hide();
});
}
});
If you want the cool-o fade in and out, then change the Library picker to scriptaculous-packed and paste in this code INSTEAD:
$$('a').each(function(elm){
var title = elm.readAttribute('title');
if(!!title){
elm.writeAttribute('title',null);
elm.setStyle('position:relative');
var tip = new Element('span',{'class':'tooltip'});
tip.update(title).hide();
elm.insert(tip);
elm.observe('mouseover', function(evt){
tip.appear({duration:0.4});
});
elm.observe('mouseout', function(evt){
tip.fade({duration:0.4});
});
}
});
Finally, open up the Page / HTML Markup dialog, move to the Before section, and paste in the following CSS:
<style type="text/css" media="screen">
.tooltip {
position:absolute;
z-index: 1000;
background-color: #333;
color: #fff;
text-decoration: none;
bottom: 2em;
left: -50%;
width: 100px;
padding: 3px 8px;
font-size: smaller;
border-radius: 8px;
}
.tooltip:after {
content: '';
position: absolute;
display: block;
top: 100%;
left: 50%;
margin-left: -8px;
border: 8px solid;
border-color: #333 transparent transparent transparent;
}
</style>
Your designer can tweak the color of the tip, the radius of the corner, and if you don’t want the little triangle pointer, you can simply remove the second rule, as it generates that out of thin air.
Stepping through, what this trick does is memorize the existing title attribute, then delete it. Next, it makes the link into a CSS-positioning “anchor” with position:relative. Next, it creates a span inside the link containing the memorized title attribute, and sets that element to be initially visible. Finally, it sets up two observer functions on the link, so that the mouseover will cause the tooltip to appear, and the mouseout will cause it to hide.
Hope this helps keep you out of the jQuery woods for another while.
Walter
On May 23, 2012, at 1:35 PM, DeltaDave wrote:
This one does use jQuery so should be used with caution and preferably not mixed with the FW script/protacous based actions.
http://www.deltadesign.co/fw_examples/jQuery/jquery-tooltip.html
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options