I am using jquery cluetip and i have a link at the top right hand of the page and when i click it, I want the tool tip to show up at the bottom of where i click but instead it shows up either in the middle of the screen or at the top of the screen. Here is my code:
$('#personName').cluetip({
width: '500px',
showTitle: false,
topOffset: 25,
leftOffset: 5,
positionBy: 'bottomTop',
cluetipClass: 'jtip',
activation: 'click',
closeText: '<img src="/Content/Images/Icons/cross.png" alt="close" />Close',
hoverIntent: {
sensitivity: 7,
interval: 100,
timeout: 500
},
sticky: true,
mouseOutClose: true,
ajaxSettings: {
dataType: 'json'
},
ajaxProcess: function (data) {
var html = [];
html.push(data.Person.Name);
return html.join("");
}
});
I have tried changing positionBy to "auto" or "mouse" but it still doesn't work . . does cluetip simply not handle link on the right side of the screen at all ?
It looks like cluetip has trouble handling links on the right side when the size does not fit within the screen.
I tried using positionBy: 'mouse'
with leftOffset
and topOffset
and got it to appear slightly to the left side bottom of the link. Look at the second div
in http://jsfiddle.net/neo108/9CV6t/.
Hope it helps.
Might be you can play with the left and top offsets and position it as you desired.