We Keep Coding

Using DHTMLX Scheduler, prevent tooltips from disappearing when hovering out of the event to the tooltip

I have been using the excellent DHTMLX Scheduler for a few days to get on with it, and I found solutions and workarounds for almost every specific things I wanted to achieve.
However, in this particular case, I am using the extension that allows tooltip customisation when hovering on an event (see doc here) which is working fine.
My problem here is the tooltip disappears when hovering out of the event, which is not wrong. The thing is I want to add clickable content in the tooltip, but since it disappears this simple task is rendered impossible.
I've searched through the docs, various forums and even here, but I haven't found any help regarding that matter.
Long story short, how can I prevent tooltips from disappearing when hovering above the tooltip itself (if at all possible)?
Thank you anyway.

The tooltip dissapears (after some delay) when the mouse hovers on an empty space. I.e. if user could move a pointer from an event into the tooltip without pointing to the elements outside both tooltip and event - tooltip won't dissapear.
Try setting some configurations, so tooltip will appear closer to the pointer and user will be able to move cursor into it:
scheduler.tooltip.config.delta_x = 5;
scheduler.tooltip.config.delta_y = -5;

HTML5 Drag and Drop with insertBefore

I am working on a drag and drop project.
How: I am using the HTML5 drag events.
Code: See fiddle here
Problem: It only works sometimes, and I checked the code a million times
Idea:
- Get element and drag it over a div with id: LayerN (N=number)
- Create a new layer before LayerN when dropping
- AppendChild to new Layer.
- Remove empty layers if there are any.
Is there anything I am doing wrong or too complex? I don't want to use a JQuery framework, i want to understand what I am doing. Thanks a lot for reading, any help will be highly appreciated.

I can't get your fiddle to work so I'm giving general comments rather than a full 'answer' so hope it helps!
For D&D I find what works best is attach a mousedown event to the document on page load (or the containing element of the draggable objects if that's more appropriate).
Don't attach any events to the draggable elements themselves at this stage.
On mousedown, check the classname/id of the target and if it's draggable:
If you want to show it dragging, clone the element and append to a position:fixed or :absolute DIV - you can move this on mousemove relative to the cursor. Keeping this element offset to the cursor means you can still detect what's under the cursor.
Hide the element you're dragging. You can put some sort of image showing where it came from at this stage if you wish using insertBefore.
I hide the element rather than move it because if you cancel the drag it's very easy to restore it.
Attach mousemove and mouseup events to the window or document. The function you call on mousemove can, based upon the event.target/event.srcElement, decide whether the dragged object can be dropped or not (again, I generally look for a className here).
This way you've only got a maximum of two event listeners running everything rather than multiple events on every single element. I suspect your event listeners may be tripping over each other.
I don't know if that gets you any further, but good luck!

Binding Multiple dragenter/ dragleave Events in HTML5 Drag 'n Drop?

Here's a basic example of what I have going on here:
http://jsfiddle.net/kgqkM/2/
What I'm trying to do is dedicate the area outside of this list to be a "delete" area where I can set up the appropriate logic to remove the dragged element from the page. I'm attempting to show when the user drags the element off the list it would color the outside red/ semi-transparent. When I set events on the outer-wrapper, they seem to take over all the dragenter/ dragleave events.
Guessing my issue has to do something with setting the event on the parent div? I'm starting to try and perhaps have one master event on top and deciding what to do based on the e.target and .parents('.switch'), but insofar it's resulting in buggy behavior.

It would seem that I had to do some (correct) logic on the event target. I have to refactor my code a bit, but it's working out.

How to create a move handle using jquery

This is more the theoretical type of question.
In my web-application i want to create a button that the user can click and therefore initiate a move-mode during which (until the mouse is released) all the mouse movements are being translated onto a certain DIV.
To better understand what i mean, think of a box in which to show a portion of an image (box is overflow:hidden) - i want to make it possible to move the image around within the box, but not by directly dragging the image, but by dragging a handle instead (a handle that does not move when dragged)
In the optimum case the mouse cursor hides while the drag operation is on.
My basic idea was to use a draggable but i got no clue on how to make it accessible, yet invisible.
How would i accomplish that using javascript/jQuery?

Making the cursor invisible isn't too difficult, see the top two answers on this question.
As for the handle, you could try using jQuery UI Draggable's handle option. The key to making the handle appear stationary is to have a separate element that looks like the handle, and position the real handle (which would be an empty element) on top of it.
You would then position the real handle back where it was, covering the fake handle, when the stop() event is fired.
So, in the start() event, you would add a class to the real handle that makes the cursor invisible (using either of the methods in the post mentioned earlier), and remove that class when the stop() event fires, causing the cursor to reappear.

The easiest approach would probably be to just apply different CSS styles on the click event of the button.
Add a class to your element (on click) for the :hover pseudo-class that has cursor: move; for its style and has cursor: none; for the :active pseudo-class. You could then have these styles removed once the user's mouse left the draggable area.
On click the function might look like this:
$('#myButton').click(function(){
$('#myDraggableElement').addClass('draggable');
});
$('#myDraggableElement').mouseLeave(function(){
$(this).removeClass('draggable');
});
Have I understood the question correctly?

Jquery: Unbinding what was bound isn't working like I thought it would, help figuring out why? (JS Fiddle example included)

http://jsfiddle.net/nicktheandroid/GPFxM/28/
I've also explained the situation in the JS Fiddle example.
I binded hover and mousemove, but when unbinding them, i have to ALSO unbind mouseenter and mouseleave to get it to work a little better, but still it doesn't work correctly.
I changed the cursor to Pointer in the hover bind, but when unbinding it I thought the cursor would go back to normal, but it doesn't?
My plugin adds a 'cursor image', which is an image that follows the cursor around when hovering over specific elements. I made a div that has a cursor image when hovering this div, when clicking on the div it unbinds the hover, which should unbind the cursor image, what happens though is that the cursor image sticks to the box, and doesn't fade out like it should.
I just need help getting this straightened out and if you could explain to me what I did wrong, that would be greatly appreciated, thanks so much.

unbind only takes one event at a time, so your code only ever unbinds mouseover.
Note that hover simply binds both mouseenter and mouseleave.
Why do you think that simply unbinding the events will remove the image also? If you add $('#tehCursor').fadeOut('fast'); to the click handlers for the disable span and .myBox, you should see it work like what I think you expect.
You probably should another function to remove the effects of change cursor from the element it was bound to - I'm not sure what the best way to do this might be (keeping in mind jQuery plugin conventions).
Update
My first ever jQuery plugin; I can't claim to understand it all and it probably isn't the most efficient since I basically took the code in this tutorial and adapted it to your needs. This fiddle should be what you're looking for.