javascript - Keep Qtip in page bounds? -


i using qtip sidebar: enter image description here

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

  1. use position:fixed instead of position:absolute on qtip.
  2. use max-width instead of width , define right:0, way right side of qtip never exceed rightmost side of body.
  3. try tipy jquery tooltip plugin made myself, (in case tell me think).

Comments

Popular posts from this blog

node.js - Bad Request - node js ajax post -

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -