FloatingTips with stay active on hover - mootools

Question

I am using FloatingTip tool tip for my project and i am struggling for how to stay active and not to be closed when cursor is on tooltip.
Hear is jsFiddle [http://jsfiddle.net/SLvUz/3/][1]
For example: When mouse hover to tooltip and anchor Let me see! tooltip stay open.
Detail link: https://github.com/lorenzos/FloatingTips
Any ideas or suggestions? Thanks.

Answer 1

Unfortunately this plugin doesn't have such option at the moment, but it has methods and events, so you can implement this behavior using them. The code may look like following:
$$('#advanced a').each(function(elem){
var instance = new FloatingTips(elem, {
// example options
content: function() { return $('htmlcontent'); },
html: true, // I want that content is interpreted as HTML
center: false, // I do not want to center the tooltip
arrowOffset: 16, // Arrow is a little more the the right
offset: { x: -10 }, // Position offset {x, y}
// override show/hide events
showOn: null,
hideOn: null
});
// customize tooltip behavior
var delay = 100, timer;
var tipHover = function() {
clearTimeout(timer);
}
var tipLeave = function() {
clearTimeout(timer);
timer = setTimeout(function(){
instance.hide(elem);
}, delay);
}
instance.addEvents({
show: function(tip, elem){
tip.addEvents({
mouseover: tipHover,
mouseout: tipLeave
});
},
hide: function(tip, elem){
tip.removeEvents({
mouseover: tipHover,
mouseout: tipLeave
});
}
});
elem.addEvents({
mouseover: function() {
clearTimeout(timer);
timer = setTimeout(function(){
instance.show(elem);
}, delay);
},
mouseout: function() {
clearTimeout(timer);
timer = setTimeout(function(){
instance.hide(elem);
}, delay);
}
});
});
Check updated fiddle here: http://jsfiddle.net/SLvUz/455/