Tooltip location partially off screen

On my calendar, I have a popup which has a bunch of text on it.

The problem is that the tooltip pops the window too high and thus it gets partially cut off at the top.

You can see the problem here:

Just look for the multi-day event in Dec.


I looked into your sample and tooltip is actually working as intended though probably it’s not your expected result. Let me explain: first of all tooltip is trying to display itself in the assigned position but if by displaying this way it will be left out of the screen view when it mirrors itself to the other side. There are several such cases depending on the tooltip configuration: it may be too far on the right, bottom, left side and top. In your case tooltip is too wide and too long so it mirrors itself and will be displayed at the top-left position of the cursor but because of it’s size it doesn’t fit there either. Now if the screen resolution was big enough it would be displayed normally, check the attachment.
Possible solution in your case would be to limit number of displayed characters so tooltip would be more or less the same size each time and would surely fit one case (normal mode) or another (mirrored).

Best regards,

Is it possible for me to use a different tooltip mechanism?

For example, can I write my own event?

I looked over the tooltip customizations.

What I was hoping to do was to be able to use a different tooltip mechanism, like dojo, which might make things look a bit better, and might behave a bit better.

But I am skeptical that I can make that work…


It is possible.

scheduler.attachEvent("onMouseMove", function(event_id, e){ if (event_id) { // if we are over some event // custom logic to display tooltip } else { // custom code to hide tooltip } });
But the problem here is not in the tooltip’s logic but it’s size. If it doesn’t fit in any side of the window then there is not much to do with it.

Best regards,

I think the problem is to use a different tooltip mechanism (like dojo’s) would require being able to attach the dojo tooltip widget to the actual DOM where it is to be invoked.

I am guessing that would involve knowing the all the div tags (or whatever you use) for the events on the calendar view.


We are actually storing them though it’s not part of the public API.

var event_div = scheduler._rendered(event_id);

Would return div element where event is rendered.

Best regards,

So, if I wanted to use a dojo tooltip, I suppose I could do one of a couple things:

  1. I could write javascript to create a dojo tooltip and attach it to each event DIV tag, and just over-ride the onMouseMove event to do nothing.


  1. Use the onMouseMove to create a dojo tooltip on demand (keeping track of them in a javascript array) and attach them to the DIV at that point. I guess I don’t really know if this strategy would work…

Any other ideas?

to create a dojo tooltip and attach it to each event DIV tag
I think the best strategy will be to create dojo tooltip from onMouseMove event.
Scheduler’s view is dynamic, and divs are repainted when view changed ( old removed, new added ) - so you can’t attach tooltips once and for all, but need to attach them dynamically, each time when it necessary.

Yea, I was going to give that a shot. I don’t think I have much control over when the tooltip is shown.

So, I think my strategy would be in the onMouseMove event to create a dojo tooltip for the event div only if one has not already been created for that event’s div.

Do you think that might work?

Yep, I think it will work.

Is any special reason why you preffer to use dojo tooltips.
Basically in onmousemove event handler you have all necessary info to show just any custom piece of html at mouse event position. I don’t think that it will be a problem to mimic styling of dojo tooltip with custom styling.

The dojo tooltip is a bit nicer looking. And I am also interested to see if it can do a better job with placement.

I figured out that scheduler._rendered is an array not a function. But I could not get the div tag using the following:


event_id is a string corresponding to the event ID number.

I also noticed that the div tags do not have IDs, that would be another easy way for me to get the DIV tag if it were available.

OK, figured it out and got the dojo tooltip working like a champ.

Not only does it look better but it always finds a good placement for the tooltip.