javascript - Keep Qtip in page bounds? -
i using qtip sidebar: 
as can see, the qtip goes offscreen , creates ugly hscrollbar on screen.
here code:
function appendcalendareventtolist(classname, event) { var eventobject = { title: event.title, id: event.id, type: event.type, color: event.color, description: event.description, canreoccur: event.canreoccur, reoccurval: event.reoccurval, esthours: event.esthours }; var div = document.createelement("div"); div.classname = 'external-event'; div.style.background = event.color; div.innerhtml = event.title; // store event object in dom element can later $(div).data('eventobject', eventobject); $(div).draggable({ helper: function () { $copy = $(this).clone(); $copy.data('eventobject', eventobject); $copy.css({ "list-style": "none", "width": $(this).outerwidth() }); return $copy; }, appendto: 'body', zindex: 999, revert: true, // cause event go revertduration: 0 // original position after drag }); $(classname).append(div); $(div).qtip({ content: event.title, position: { target: 'mouse' }, // show: { event: 'click' }, hide: { event: 'mousedown mouseleave' }, style: { width: 200, padding: 5, color: 'black', textalign: 'left', border: { width: 1, radius: 3 }, classes: { tooltip: 'ui-widget', tip: 'ui-widget', title: 'ui-widget-header', content: 'ui-widget-content' } } }); return div; } now, love is, if keep inside page (if(tip.right > page.right, tip.right = page.right)) or something..
is there way this?
at least, ensure never causes hscroll bar.
thanks
i have 3 silly answers...
- use
position:fixedinstead ofposition:absoluteon qtip. - use
max-widthinstead ofwidth, defineright:0, way right side of qtip never exceed rightmost side of body. - try tipy jquery tooltip plugin made myself, (in case tell me think).
Comments
Post a Comment