Score Example 8001-02

    Tooltips can be implemented in SVG images by adding a title element within a grouping element:

        <title>tooltip text</title>

    Use the _99 font method of adding such text before one or more SCORE items in order to attach a tooltip to the object(s). Then, when you move your mouse over an object, a text message should appear with the contents of the title element for that grouping.

    Place this two-line text object before item(s) related to the tooltip:

        T 1 1
        _99%svg%<g><title>this is a tooltip<\title>

    And then close the grouping element after the item(s) within the tooltip region:

        T 1 1

    Move (and pause) your mouse over various musical elements in the following SVG image to see what it is.

    staff clef key signature time signature quarter note dynamic barline

    The same data, using defines:

    In the following image, move your mouse over the notes to see a tooltip displaying the pitch of the note. The following examples works in Firefox, but not in Chrome for some reason.

    pitch: G3 pitch: G3 pitch: F#3 pitch: G3 pitch: A3 pitch: F#3 pitch: G3 pitch: F#3 pitch: E3 pitch: D3 pitch: B3


    Move your mouse over the various neumes in the following example to see the name of each neume.

    C clef torculus Po- torculus pu- lum scandicus hú- podatus subbipunctis clivis mi- porrectus lem clivis with morae podatus salvum liquescent neume torculus fá- clivis with episema ci- tripumctum es,

    JavaScript mouse-over tooltips

    More sophisticated tooltips can be done using JavaScript (SVG image).