CSS Tooltip

GoJS
#1

Hi,

I am looking for a way to implement a CSS tooltip via an absolute positioned

element. This is motivated that our current app as already a tooltip mechanism, and we want all tooltip to look the same.

The tooltip property of a graphobject would be a HTML template or a simple string. This would be passed to showTooltip who will set the correct position.

So, I need to override to doTooltip, showToolTip, hideTooltip to implement this behaviour.

Is this the correct way to do it and is it possible ?

#2

You don’t have to use the toolTip mechanism if you don’t want to, for the sake of simplicity you could just update some CSS on every Diagram mouseOver.

That’s how we do the CSS “tooltip” here: http://gojs.net/latest/samples/dataVisualization.html

#3

Yes, i have thought about this solution. The point is that i want to have the behaviour that Tooltip gives me, so i tried something like this, sorry for this ugly piece of code :blush:

This works more or less, but i want to reposition and style my tooltip according to the mouse position AND the graphObject position.

Is there a way to access this information (=mouse position) without registering an event handler to keeping tracks of mouse position ?

myDiagram.toolManager.showToolTip = function(tooltip, graph) {
console.log(this, tooltip, graph.actualBounds.x, graph.actualBounds.y);

                var point = new go.Point( graph.actualBounds.x, graph.actualBounds.y);

                var p2 = myDiagram.transformDocToView(point);
                console.log(p2.x, p2.y);
                // do some magic to determine arrow position
                // y position does not need to be corrected

                _tooltip.css({top:p2.y+'px',left:(392+p2.x)+'px'});
                _tooltip.toggleClass('in');

                if (!!graph.data.htmlTooltip) {

                } else {
                    console.log('default behaviour')
                    go.ToolManager.prototype.showToolTip.call(myDiagram.toolManager, tooltip, graph)
                }
                // fallback to default behaviour

            };
#4

Ok. i’ll try Diagram.lastInput