Tooltip in Paper.js - paperjs

Question

I am a beginner in Paper.js . Please could someone tell me how to display tool tip on a paper.js object ? The tool tip should be visible when the mouse moves over the object and should disappear when the mouse moves away from the object .
Thank you.

Answer 1

When drawing your object you want to create a popup for, first add it to a group, then use the onMouseEnter and onMouseLeave handlers on that object:
// Create a group
var group = new Group();
// Create a dot (circle the mouse will hover)
var point = new Point(50, 50);
var dot = new Path.Circle(point, 5);
dot.fillColor = 'blue';
// Add dot to group
group.addChild(dot);
// Create onMouseEnter event for dot
dot.onMouseEnter = function(event) {
// Layout the tooltip above the dot
var tooltipRect = new Rectangle(this.position + new Point(-20, -40), new Size(40, 28));
// Create tooltip from rectangle
var tooltip = new Path.Rectangle(tooltipRect);
tooltip.fillColor = 'white';
tooltip.strokeColor = 'black';
// Name the tooltip so we can retrieve it later
tooltip.name = 'tooltip';
// Add the tooltip to the parent (group)
this.parent.addChild(tooltip);
}
// Create onMouseLeave event for dot
dot.onMouseLeave = function(event) {
// We retrieve the tooltip from its name in the parent node (group) then remove it
this.parent.children['tooltip'].remove();
}