Problem in using helpText

[sadrajafari]

Hey, I am just wondering how to use helpText because I do not see anything appear after using that. It will be great if you explain about it and provide a sample code.
Thanks.

[jessegreenberg]

Hi @sadrajafari - helpText is related to screen reader accessibility. It allows you to add information about a Node that can be discovered when using a screen reader. It does not add any text that you can see. Scenery creates a "Parallel DOM" - an invisible DOM tree that is available to a screen reader that represents scenery's graphical display objects. Here is an example:

// Set up the scenery Display.
const rootNode = new phet.scenery.Node();
const display = new phet.scenery.Display( rootNode );
document.body.appendChild( display.domElement );

// Initialize events to support input and focus/blur events
display.initializeEvents();

// Draw a circle and set some accessibility options
const circle = new phet.scenery.Circle( 100, {
  fill: 'lightblue',
  stroke: 'black',
  lineWidth: 4,

  // pdom options - This Node is represented as a button in the Parallel DOM, which also makes it focusable. The
  // tagName is required to use other pdom options
  tagName: 'button',
  accessibleName: 'Blue Circle', // inner content for the button
  helpText: 'This is a large blue circle at the center of the screen.' // additional help text
} );
rootNode.addChild( circle );

// Update the scenery display every animation frame
display.updateOnRequestAnimationFrame( () => {} );

// Resize the display to always fill the window
display.resizeOnWindowResize();

// Manage layout
const resizeListener = () => {
  circle.center = new phet.dot.Vector2( window.innerWidth / 2, window.innerHeight / 2 );
};

window.addEventListener( 'resize', () => {
  resizeListener();
} );
resizeListener();

This draws a blue circle at the center of the screen and adds the following to the Parallel DOM:

<button>Blue Circle</button>
<p>This is a large blue circle at the center of the screen.</p>

More information about the Parallel DOM can be found at https://phetsims.github.io/scenery/doc/accessibility/accessibility.html and https://github.com/phetsims/scenery/blob/9efa7715760ceaa2015a796a24b0186246268dcf/js/accessibility/pdom/ParallelDOM.ts.

[sadrajafari]

So is it possible to provide code that shows that how I can use tooltip in my project?

Many thanks.

[jessegreenberg]

I am not aware of a Tooltip component in SceneryStack, but you could make your own with scenery like this:

// Set up the scenery Display.
const rootNode = new phet.scenery.Node();
const display = new phet.scenery.Display( rootNode );
document.body.appendChild( display.domElement );

// A reusable class that creates a tooltip. It is initially invisible and becomes visible when you mouse over a circle.
// It combines scenery Text and Rectangle Nodes to render something that looks like a tooltip.
class Tooltip extends phet.scenery.Node {
  constructor( text ) {
    super();

    this.visible = false;

    // The text of the tooltip
    const tooltipText = new phet.scenery.Text( text, {
      font: new phet.scenery.Font( { size: 30 } )
    } );

    // A rectangle that will be the background of the tooltip
    const background = new phet.scenery.Rectangle( 0, 0, tooltipText.width + 10, 100, 10, 10, { fill: 'white', stroke: 'black' } );
    tooltipText.center = background.center;

    this.addChild( background );
    this.addChild( tooltipText );
  }
}

// Initialize events to support input
display.initializeEvents();

// Draw two circles
const circleA = new phet.scenery.Circle( 100, {
  fill: 'lightblue',
  stroke: 'black',
  lineWidth: 4
} );
rootNode.addChild( circleA );

const circleB = new phet.scenery.Circle( 100, {
  fill: 'lightgreen',
  stroke: 'black',
  lineWidth: 4
} );
rootNode.addChild( circleB );

const tooltipA = new Tooltip( 'This is some helpful text about the blue circle.' );
const tooltipB = new Tooltip( 'This is some helpful text about the green circle.' );
rootNode.addChild( tooltipA );
rootNode.addChild( tooltipB );

// show the tooltip when the mouse moves over the circles
circleA.addInputListener( {
  over: event => {
    tooltipA.visible = true;
  },
  exit: event => {
    tooltipA.visible = false;
  }
} );
circleB.addInputListener( {
  over: event => {
    tooltipB.visible = true;
  },
  exit: event => {
    tooltipB.visible = false;
  }
} );

// Update the scenery display every animation frame
display.updateOnRequestAnimationFrame( () => {} );

// Resize the display to always fill the window
display.resizeOnWindowResize();

// Manage layout
const resizeListener = () => {
  circleA.center = new phet.dot.Vector2( window.innerWidth / 4, window.innerHeight / 2 );
  circleB.center = new phet.dot.Vector2( window.innerWidth * 3 / 4, window.innerHeight / 2 );
  tooltipA.centerBottom = circleA.centerTop.minusXY( 0, 20 );
  tooltipB.centerBottom = circleB.centerTop.minusXY( 0, 20 );
};

window.addEventListener( 'resize', () => {
  resizeListener();
} );
resizeListener();

More information about using scenery for this can be found at https://phetsims.github.io/scenery/doc/a-tour-of-scenery.html and https://phetsims.github.io/scenery/doc/.