Search code examples
jquerycluetip

Does cluetip work on a link at the top right of a page?


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 ?


Solution

  • 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.