Develop Reference

fullcalendar add tooltip by hover on day

I'm trying to add tooltip here. I'm using the event datesRender
var fcContent = element.query('.fc-day.fc-widget-content');
fcContent.forEach(function(content) {
content.setAttribute("data-qtip", "Tooltip content");
});
But after clicking on some day the tooltip does not show again. Is there any solution?

Not sure if this solution works with your requirement, but I think the best way could be using a background event. That will work like an annotation but it will not be a tooltip just like a label in the background. Check the documentation below. You can add the title property of the event to show a label in the background.
Background events

How to totally disable elements events?

I'm using the compound model and the cytoscape-compound-drag-and-drop extension to let the user manually reorganize the layout by grouping some nodes together and moving whole groups easily.
Now I want a button to toggle the display of these groups "boxes", but keep displaying all non-parent nodes.
I first tried hide() on parent nodes, but it also hides the children, so I switched to dynamically applying a class which specifies display:hidden.
It seemed to do the trick, but still the hidden box can be clicked and cytoscape default "visual feedback" for click applies, showing off the area where the hidden box still lies.
I tried plenty of things that didn't work:
- disable events from my hidden style class: tried events:no. Should I report this as a bug ?
- .ungrabify().unselectify().panify().lock()
- on click: destroy the event object
- set e.target._private.active = false
I tried a nasty hack: setting e.target._private.position = {}
The event is still fired, but destroying the position sucessfully prevents the "visual feedback" from happenning, my box effectively stays "hidden".
But still the event occurs on the wrong target: the box, not on the empty space of the cytoscape container. I can keep hacking and leave with it, but isn't there a simpler solution to ?
Is it possible to simply and truly pass through hidden parent nodes events ?

You haven't used events properly.
cy.$('node').forEach(node => {
node.events = 'no'; // will not work
});
The following does work, and you can also restore events whenever you want.
cy.$('node').forEach(node => {
node.style('events', 'no');
});

HighChart is preventing click event on a parent

I am building a table where when cell is clicked high charts is shown in its place(same way as flip cards). And when highchart is clicked a cell is reverted back it is original state.
However, after creating a chart dynamically all my click functions on a parent stop working when clicking on a chart directly.
I have created this small jsFiddle to demonstrate my problem:
http://jsfiddle.net/2j4qQ/2/
Code:$('#contentDiv').on('click', '.homepageChart', function() {});
$('#contentDiv').on('click', '.homepageChart', function() {});
This function does not fire when clicking directly on a chart. Why? and how can it be
Thanks in advance.

Have a look at this: jsfiddle.net/cssimsek/4Wa32/1. Since you were appending the Highcharts <div> with each click I added the .detach() method to the callback function of the .hide()method, in order to remove the <div> on secondary clicks. It seems to be working ok now.

I have added an overlay with z-index:1; to my highcharts which seems to solve the problem. However, this seems incorrect, since i should be able to listen to dynamically created highcharts events. If anyone has some info on this please share.
Here is updated fiddle:
http://jsfiddle.net/2j4qQ/5/

GWT - changing anchor title dynamically

We have a link in a table cell. When the user hover overs the link, an async RPC call is made and the hover text (the title attribute) is updated. We are seeing wildly inconsistent results with the hover text changing while the user is still hovered over the element. On some machines it works fine, on others not at all.
We cache the results so if the user triggers the hover again, the tooltip text is correctly displayed.
Is there a trick to updating the anchor's title attribute while the user is still hovered over the anchor?
When the RPC call succesfully returns, we just call
link.setTitle(text);
which calls
/**
* Sets the title associated with this object. The title is the 'tool-tip'
* displayed to users when they hover over the object.
*
* #param title the object's new title
*/
public void setTitle(String title) {
if (title == null || title.length() == 0) {
DOM.removeElementAttribute(getElement(), "title");
} else {
DOM.setElementAttribute(getElement(), "title", title);
}
}

Your code here doesn say much about the problem. setTitle works wthout any issues no doubt. But firing an async call on mousehover is not so desirable as the issue you are facing here purely looks like originating because of time taken by the async call to complete.
I would strongly suggest to prefetch the data that you need to show on mouseover, during the page load itself and set that text directly instead of an async call.

When a user moves a mouse over a link, the browser displays the title attribute as a tooltip. In your case, there is no tooltip at all if the title is not set. When your RPC call returns and you set the title, nothing will happen in the browser until the user moves a mouse away from the link and then back over the link. So some tooltips will not show up, others (already set on the previous mouse-over) will show up: this UI pattern will really confuse your users.
You may have to rethink your design. A better approach is to show a small popup panel next to your link. You have complete control over when this panel shows and hides. Create a popup panel. Add a MouseOverHandler to your links. When a MouseOverEvent fires, dispatch your RPC call. When the call returns, populate the popup panel and show it next to the link. When a user moves away, hide the popup panel.
It can obviously be optimized if you have a large number of links in a table: you can use a single MouseOverHandler for the table and then check which element is the source of the event.

Pass events through Protovis Panels

I have a Protovis graph that responds to pan/zoom events like the sample on the website, which covers the Panel that holds the graph with an empty one. Unfortunately it captures all Events like mouseover and mouseout which my underlying graph usually responds to.
This is because you have to set the Panel to accept all events. According to the docs the only valid params for this are 'all', 'painted' and 'none'
vis.add(pv.Panel)
.events("all")
How can I prevent the zoom Panel from capturing these events? Or how can I pass them through to the Panel below it?

I don't think this is necessarily the answer you want, but as far as I can tell there's no easy way to pass events through to lower elements. However, if your graph is similar to the example, you can simply change the order of the invisible Panel and the marks that should receive events, from:
vis.add(pv.Dot)
.event('click', function() { alert("clicked") })
// ... etc
vis.add(pv.Panel)
.events("all")
// ... etc
to:
vis.add(pv.Panel)
.events("all")
// ... etc
vis.add(pv.Dot)
.event('click', function() { alert("clicked") })
// ... etc
This will change the z-order of the marks, so that the dots receive click events before the panel. It's a little less plug-and-play, as you have to insert the panel at the correct point in your existing graph, but it should work.
You can see a jsFiddle based on the example here: http://jsfiddle.net/nrabinowitz/Ctxrr/
EDIT: Per the comment below, this approach can be a problem for zoom events. The better approach, shown in this updated fiddle, is to make the invisible Panel the parent of the marks in question - events will automatically bubble up from child to parent, and if the child doesn't set a listener for an event, it won't interfere with the parent. So as long as all foreground marks that need to receive events are children of the pan/zoom Panel, this should work.