Tooltip element

description

Represents a tooltip.

syntax

newTooltip(ELEMENT_NAME: string, TOOLTIP_TEXT: string, [VALIDATION_TEXT: string])
  • ELEMENT_NAME: The name of the newly-created element.
  • TOOLTIP_TEXT : The text that appears on the tooltip.
  • [VALIDATION_TEXT] (optional): The text that appears on a clickable button that validates and closes the tooltip. By default, this text is the string "OK".

since

beta 0.3

example(s) 


@newImage("myImage", "square.png")
@    .print()
@,
$newTooltip("myTooltip", "This is a square")
$   .print( getImage("myImage") )
+ Adds an image to the page and places a box with the text This is a square to its bottom-right corner, which disappears when a validation button (reading OK by default) is clicked.

Action commands

tooltip.frame

syntax

.frame()

description

Will add a frame surrounding the element to which the tooltip is attached when it is printed. You can optionally define the aesthetics of the frame by passing a string following the CSS format for borders.

example

click to expand 

@newImage("myImage", "square.png")
@    .print()
@,
@newTooltip("myTooltip", "This is a square")
$    .frame()
@    .print( getImage("myImage") )
@    .wait()
  • Adds an image to the page, surrounds it by a 1px, dotted, gray frame (by default) and places a box with the text This is a square to its bottom-right corner. Both the frame and the tooltip disappear when the tooltip is validated.
↑ back to top

tooltip.key

syntax

.key()

description

Makes it possible to validate the tooltip by pressing a key. You can either pass a string of keys, or pass the keycode of a specific key (e.g. 13 for enter/return). If you pass a non-null second parameter (e.g. “no click”) then clicks will have no effect for validation, and if you have not specified a text for the validation button when creating the tooltip, no such button will be displayed at its bottom-right corner.

example

click to expand 

@newImage("myImage", "square.png")
@    .print()
@,
@newTooltip("myTooltip", "Press enter/return when you are done admiring this beautiful square")
$    .key(13, "no click")
@    .print( getImage("myImage") )
@    .wait()

  • Adds an image to the page and places a box with the text Press enter/return when you are done admiring this beautiful square to its bottom-right corner, containing no validation button. The tooltip will disappear only when the enter/return key (whose keycode is 13) is pressed.

↑ back to top

tooltip.label

syntax

.label()

description

Resets the text of the validation button.

example

click to expand 

@newAudio("sentence", "test.mp3")
@    .disable()
@    .print()
@    .play()
@,
@newTooltip("instruction", "After the audio is done playing, you can replay it as many times as you want", "Please wait")
@    .disable()
@    .print( getAudio("sentence") )
@,
@getAudio("sentence")
@    .wait()
@    .enable()
@,
@getTooltip("instruction")
$    .label("OK")
@    .enable()
@    .wait()
  • Adds a disabled interface to play the audio test.mp3 to the page, starts playing it immediately and attaches a disabled tooltip to its bottom-right corner, with its validation button reading Please wait. After the audio has finished playing, the interface is enabled (so the audio can be replayed at will) as well as the tooltip, whose validation button’s text gets changed for OK.
↑ back to top

tooltip.log

syntax

.log()

description

Will add a line in the results file each time the tooltip is validated.

example

click to expand 

@newAudio("sentence", "test_sentence.ogg")
@    .log()
@    .wait()
@    .print()
@,
@newTooltip("instructions", "Use this interface to replay the audio as many times as you want")
$    .log()
@    .print( getAudio("sentence") )
@    .wait()
  • Starts playing the audio file testsentence.ogg_ and, when it has finished playing, adds an interface to replay it at will onto the page and attaches a tooltip at its bottom-right corner. Since .log is called on both the audio and the tooltip, the results file can tell how long of a delay passed between the end of playback and the validation of the tooltip, and whether and how many times the audio was replayed before and after validating the tooltip.
↑ back to top

tooltip.position

syntax

.position()

description

Defines the relative position of the tooltip when it is attached to an element (bottom-right by default).

example

click to expand 

@newImage("myImage", "square.png")
@    .print()
@,
@newTooltip("myTooltip", "This is a square")
$    .position("top center")
@    .print( getImage("myImage") )
@    .wait()
  • Adds an image to the page and places a tooltip reading This is a square above the image, horizontally centered to its middle axis.
↑ back to top

tooltip.print

syntax

.print()

description

Adds the tooltip to the page, or attaches it to the referenced element (if any).

example

click to expand 

@newImage("myImage", "square.png")
@    .print()
@,
@newTooltip("myTooltip", "This is a square")
$    .print( getImage("myImage") )
@    .wait()
  • Adds an image to the page and places a box with the text This is a square to its bottom-right corner, which disappears when a validation button (reading OK by default) is clicked.
↑ back to top

tooltip.text

syntax

.text()

description

Resets the text of the tooltip.

example

click to expand 

@newAudio("sentence", "test.mp3")
@    .log()
@    .print()
@,
@newTooltip("instructions", "Use this interface to play and replay the audio as many times as you want")
@    .print( getAudio("sentence") )
@,
@getAudio("sentence")
@    .wait()
@,
@getTooltip("instructions")
$    .text("Feel free to replay if you want")
  • Shows an interface to play the audio test.mp3 and attaches a tooltip at its bottom-right corner. The text will be updated after the audio has played, if the tooltip has not been validated, and therefore has not disappeared from the screen in the meantime.
↑ back to top

tooltip.wait

syntax

.wait()

description

Waits until the tooltip is validated and disappears before evaluating and executing the next commands.

example

click to expand 

@newAudio("sentence", "test.mp3")
@    .print()
@,
@newTooltip("playAudio", "Play this audio file before proceeding")
@    .print( getAudio("sentence") )
$    .wait( 
$        getAudio("sentence")
$            .test.hasPlayed()
$            .failure( getTooltip("playAudio").print(getAudio("sentence")) )
$    )
@,
@newText("confirmation", "Now you can proceed")
@    .print()
  • Adds an interface to play the file test.mp3 to the page and attaches a tooltip reading Play this audio file before proceeding at its bottom-left corner. The confirmation text Now you can proceed will only be added to the page when clicking the tooltip’s validation button (at its bottom-right corner, reading OK by default) after the audio has been played at least once. If the tooltip is validated before the audio has been played (validation having the systematic effect of making the tooltip disappear) the failure command re-attaches the tooltip to the audio interface.
↑ back to top

Test commands

Table of contents