Adding text on hover

[Radhe Shyam]

Hi ,

I was wondering if JSXGraph provide a feature where I can display some text on hover of any object like point,line,circle etc.

Is there a way to have this capability in JSXGraph objects?

In this fiddle , I want to display circle's radius on hovering over circle. 

Thanks

-Radhe

[Andreas Olsson]

I agree Radhe, that would be useful!

I was thinking about something similar. if there could be a feature where you could with just one command turn off/on the name/label of all elemetents. Or even better, the variable you set to represent a certain element.
I use JSBin to get the the realtime output. It would be very helpful at times when there is lots of different elements on your board and you quickly just want to have an overview where they are positioned while building a graph. When done, you can turn them all off again and just keep the ones you want.

Thanks jsx for such a great tool, I found very good use of it in many areas and fun to work with too.
Cheers!
/Andreas

[michael]

Hi Radhe,

yes this is possible. Just use the over/out events. I updated your example accordingly:

http://jsfiddle.net/migerh/2L9j6xa2/

See the event summary table here http://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.GeometryElement.html for more information.

Best regards,

Michael

[michael]

Hi Andreas,

this is also already possible. I used Radhe's example and modified it slightly:

http://jsfiddle.net/migerh/b308a5k0/

Please note the attribute "myProp" we set for certain elements. This property is ignored by JSXGraph but can be used by board.select() to select these elements (and subsequently set their color to pink).

Of course this also works with other attributes and selected properties (like element type or class).

Best regards,

Michael

[Andreas Olsson]

aha, wow that's really great!
so helpful and fast reply, many thanks!!

/Andreas

[Radhe Shyam]

Hi Michael,

I appreciate the solution you gave.But I don't want to use labels. 

I want to associate a text with objects which will be displayed on hover. This text will be different from label because labels have specific text in it. 

I wanted this text to show additional properties of elements say - On hover of circle I can display equation of circle, its radius etc. And at the same time its label can be anything.

So its like - 2 labels of any object ! 

[Alfred Wassermann]

 One possible solution to achive this is to overwrite the generic highlighting method of an element.

var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-15, 20, 15, -10], keepaspectratio:true, axis: true});

var p1 = brd.create('point',[0,0]);
var p2 = brd.create('point',[5,5]);
var circle = brd.create('circle',[p1,p2],{hasInnerPoints:true,fixed:false});

var text = brd.create('text', [10,10, function() {
    return "Circle radius = " + circle.Radius();
    }], {display: 'html', visible: false});       // Text displaying the circle radius


// Modify highlight and noHighlight method of circle.
circle.highlight = function(){
    if (this.visProp.highlight) {
        text.setAttribute({visible:true});        // show text element
        this.highlighted = true;
        this.board.highlightedObjects[this.id] = this;
        this.board.renderer.highlight(this);
    }
    return this;
}

circle.noHighlight = function(){
    if (this.highlighted) {
        text.setAttribute({visible:false});    // hide text element
        this.highlighted = false;
        delete this.board.highlightedObjects[this.id];
        this.board.renderer.noHighlight(this);
    }
    return this;
}

Hope that helps,
Alfred

[michael]

Please note: The code example in the previous version of this post was incomplete.

I'd suggest using the over/out event handlers, though. They essentially do the same as overwriting the highlighting methods but can be used without possibly breaking the JSXGraph internal highlighting routines. I adjusted Alfred's example accordingly:

 

var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-15, 20, 15, -10], keepaspectratio:true, axis: true});

var p1 = brd.create('point',[0,0]);
var p2 = brd.create('point',[5,5]);
var circle = brd.create('circle',[p1,p2],{hasInnerPoints:true,fixed:false});

var text = brd.create('text', [10,10, function() {
    return "Circle radius = " + circle.Radius(); 
    }], {display: 'html', visible: false});       // Text displaying the circle radius


// Modify highlight and noHighlight method of circle.


circle.on('over', function(){


    text.setAttribute({visible:true});        // show text element


});

circle.on('out', function(){


    text.setAttribute({visible:false});    // hide text element


});



Best regards,

Michael 

[Alfred Wassermann]

You are right, using events is much much better.
Best wishes,
Alfred

[Radhe Shyam]

Thanks Michael and Alfred.

It helps a lot !