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
    _99%svg%<\g>

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

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.

8  1   0.000  0  0 200.00
3  1   1.500  0  1
17 1   9.481  0  1   1.00
18 1  13.481  0  3   4.00
T 1 1
_99%svg%<g><title>pitch: G3<\title>
1  1  20.981 10 20   0.00 1.0000
T 1 1
_99%svg%<\g>
9  1  20.981 -2 55   1.00
14 1  34.851  1
T 1 1
_99%svg%<g><title>pitch: G3<\title>
1  1  38.313 10 20   0.00 1.5000  0 10
T 1 1
_99%svg%<\g>
5  1  38.313 12 12  55.87 1.8577 -1
T 1 1
_99%svg%<g><title>pitch: F#3<\title>
1  1  55.866  9 20   0.00 0.5000  0  1
T 1 1
_99%svg%<\g>
T 1 1
_99%svg%<g><title>pitch: G3<\title>
1  1  65.145 10 20   0.00 1.0000
T 1 1
_99%svg%<\g>
14 1  79.015  1
T 1 1
_99%svg%<g><title>pitch: A3<\title>
1  1  82.477 11 20   1.00 2.0000
T 1 1
_99%svg%<\g>
T 1 1
_99%svg%<g><title>pitch: F#3<\title>
1  1 103.139  9 20   0.00 1.0000
T 1 1
_99%svg%<\g>
14 1 117.010  1
T 1 1
_99%svg%<g><title>pitch: G3<\title>
1  1 120.471 10 20   0.00 1.0000
T 1 1
_99%svg%<\g>
5  1 120.471 12 12 134.30 1.5385 -1
T 1 1
_99%svg%<g><title>pitch: F#3<\title>
1  1 134.303  9 20   0.00 1.0000
T 1 1
_99%svg%<\g>
T 1 1
_99%svg%<g><title>pitch: E3<\title>
1  1 148.136  8 20   0.00 1.0000
T 1 1
_99%svg%<\g>
14 1 162.006  1
T 1 1
_99%svg%<g><title>pitch: D3<\title>
1  1 165.468  7 20   1.00 2.0000
T 1 1
_99%svg%<\g>
T 1 1
_99%svg%<g><title>pitch: B3<\title>
1  1 186.130 12 20   0.00 1.0000
T 1 1
_99%svg%<\g>
14 1 200.000  1

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

8  1  40.0  0.0    0  125.000 4.0

t  1   1
_99%svg%<g><title>C clef<\title>
3  1  40.0  8.0 1078
t  1   1
_99%svg%<\g>

t  1   1
_99%svg%<g><title>torculus<\title>
1  1  44.0  4.0   10 1062.000 1.0
t  1   1
_99%svg%<\g>

t  1  44.0 -0.5    1    0.664 0.0 0  0.00 0 -0.498
_00Po-

t  1   1
_99%svg%<g><title>torculus<\title>
1  1  51.0  4.0   10 1062.000 1.0
t  1   1
_99%svg%<\g>

t  1  51.0 -0.5    1    0.664 0.0 0  0.00 0 -0.498
_00pu-
t  1  58.0 -0.5    1    0.664 0.0 0  0.00 0 -0.498
_00lum

t  1   1
_99%svg%<g><title>scandicus<\title>
1  1  59.0  4.0   10 1071.000 1.0
t  1   1
_99%svg%<\g>

t  1  66.0 -0.5    1    0.664 0.0 0  0.00 0 -0.498
_00h<<u-

t  1   1
_99%svg%<g><title>podatus subbipunctis<\title>
1  1  66.0  6.2   10 1064.000 1.0
1  1  67.5  6.0   10 1063.000 1.0
1  1  68.5  5.0   10 1063.000 1.0
t  1   1
_99%svg%<\g>

t  1   1
_99%svg%<g><title>clivis<\title>
1  1  72.0  5.0   10 1068.000 1.0
t  1   1
_99%svg%<\g>

t  1  72.0 -0.5    1    0.664 0.0 0  0.00 0 -0.498
_00mi-

t  1   1
_99%svg%<g><title>porrectus<\title>
1  1  75.0  4.0   10 1072.000 1.0
t  1   1
_99%svg%<\g>

t  1  81.0 -0.5    1    0.664 0.0 0  0.00 0 -0.498
_00lem

t  1   1
_99%svg%<g><title>clivis with morae<\title>
1  1  81.0  4.0   10 1068.000 1.0 0 10.99
9  1  84.6  5.7   89    0.100
t  1   1
_99%svg%<\g>

14 1  89.0  0.0    0    0.000 0.0 0  0.00 4  8.000

t  1   1
_99%svg%<g><title>podatus<\title>
1  1  93.0  6.2   10 1064.000 1.0
t  1   1
_99%svg%<\g>

t  1  93.0 -0.5    1    0.664 0.0 0  0.00 0 -0.498
_00salvum

t  1   1
_99%svg%<g><title>liquescent neume<\title>
1  1  98.0  7.0   10 1082.000 1.0
t  1   1
_99%svg%<\g>

t  1   1
_99%svg%<g><title>torculus<\title>
1  1 105.0  8.0   10 1069.000 1.0 0  0.00 0  6.000 0 -1 5
t  1   1
_99%svg%<\g>

t  1 105.0 -0.5    1    0.664 0.0 0  0.00 0 -0.498
_00f<<a-

t  1   1
_99%svg%<g><title>clivis with episema<\title>
1  1 110.0  7.0   10 1068.000 1.0 0  0.00 0  6.000 0  0 6 0 0 0 0.4
t  1   1
_99%svg%<\g>

t  1 111.0 -0.5    1    0.664 0.0 0  0.00 0 -0.498
_00ci-

t  1   1
_99%svg%<g><title>tripumctum<\title>
1  1 117.0  8.0   10 1060.000 1.0
1  1 119.0  8.0   10 1060.000 1.0
1  1 121.0  8.0   10 1060.000 1.0
t  1   1
_99%svg%<\g>

t  1 118.0 -0.5    1    0.664 0.0 0  0.00 0 -0.498
_00es,
9  1  88.5 -0.5   71    0.500 0.5

JavaScript mouse-over tooltips

SVG image