Position jquery cluetip to the left of the target

Question

I have made friends with the jquery cluetip plugin and dig it.

Clue Tip Home

However, I would like to position the cluetip pop up to the left of the target div. Currently it calculates whether there is enough room to the right of the target and failing that will display to the left.

Here's some example code.

$('.myTip').cluetip( { hoverIntent: {
    sensitivity:  1,
    interval:     100,
    timeout:      750
    },
    cluetipClass: 'rounded',
    width: 300,  ajaxCache: false, cursor: 'pointer', sticky: true,  arrows: false,  mouseOutClose: true,
  closePosition: 'title', closeText: '<img class="iconFade2" src="${pageContext.request.contextPath}/images/cancel.png" alt="" />' });

Any takers?

Answer 1

positionBy:

Available options are 'auto', 'mouse', 'bottomTop', 'fixed'. Change to 'mouse' if you want to override positioning by element and position the clueTip based on where the mouse is instead. Change to 'bottomTop' if you want positioning to begin below the mouse when there is room or above if not -- rather than right or left of the elemnent and flush with element's top Change to 'fixed' if you want the clueTip to appear in exactly the same location relative to the linked element no matter where it appears on the page. Use 'fixed' at your own risk.

http://plugins.learningjquery.com/cluetip/#options

So you can manipulate the default positioning of the cluetip by using positionBy with leftOffset and topOffset, for example:-

$('.myTip').cluetip({
  positionBy: 'fixed',
  leftOffset: '-340',
  topOffset: '0'
});

Obviously you'll have to play around with the values yourself until you get the desired result, but that should point you in the right direction.