svg tutorials that show how to do mouseover

Question

a. i have a huge SVG file 2. i have objects in the SVG file that look like this:

<path 
     style="fill:#f7d3aa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     d="M 923.03026,37.975518 C 922.57184,38.995849 921.76084,41.697403 921.76084,44.352463 C 921.76084,47.130382 919.49185,46.324054 921.76084,48.603761 C 922.79254,49.640303 925.33008,47.328371 926.83847,47.328371 C 928.64472,47.328371 928.45237,51.223763 930.22354,51.579668 C 932.37666,52.012321 934.08737,52.522241 936.14743,52.004798 C 938.36058,51.448909 939.8978,50.502312 942.49447,51.154539 C 943.89657,51.506717 946.44388,48.461872 947.14893,47.753502 C 949.30188,45.590391 946.8075,50.401063 946.7258,50.729408 C 946.0737,53.350095 949.5805,52.429926 951.38029,52.429926 C 954.13433,52.429926 955.03028,50.940072 955.61163,48.603761 C 955.78273,47.916101 952.46128,44.82413 952.22655,44.352463 C 951.88695,43.670052 955.05553,42.433288 956.45789,41.376556 C 959.00459,39.457537 958.11054,38.360573 956.88104,37.125259 C 955.02965,35.26515 952.06131,38.141523 950.95714,39.250906 C 949.94504,40.267774 946.8031,41.463423 945.45641,41.801685 C 943.67466,42.24922 941.73037,44.09862 940.37878,44.777594 C 938.61378,45.664254 936.79892,46.420756 934.87803,46.903242 C 933.25123,47.311861 930.50953,44.639791 929.80042,43.927334 C 928.30508,42.424964 926.15309,43.238719 924.7228,41.801685 C 923.48412,40.557171 928.92137,37.975518 923.03026,37.975518 z"
     id="path2688" /> 

1. as you can see it is not a regular svg shape. the coordinates are manually defined and this makes the problem trickier.

2. i need it so that when the user puts his mouse over any one of these objects for a tooltip to pop up with customized text

so far i have not been able to find a solution for this complex problem.

do you know how to do it?

Answer 1

I think this could work:

<path style="fill:#f7d3aa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     d="M 923.03026,37.975518 C 922.57184,38.995849 921.76084,41.697403 921.76084,44.352463 C 921.76084,47.130382 919.49185,46.324054 921.76084,48.603761 C 922.79254,49.640303 925.33008,47.328371 926.83847,47.328371 C 928.64472,47.328371 928.45237,51.223763 930.22354,51.579668 C 932.37666,52.012321 934.08737,52.522241 936.14743,52.004798 C 938.36058,51.448909 939.8978,50.502312 942.49447,51.154539 C 943.89657,51.506717 946.44388,48.461872 947.14893,47.753502 C 949.30188,45.590391 946.8075,50.401063 946.7258,50.729408 C 946.0737,53.350095 949.5805,52.429926 951.38029,52.429926 C 954.13433,52.429926 955.03028,50.940072 955.61163,48.603761 C 955.78273,47.916101 952.46128,44.82413 952.22655,44.352463 C 951.88695,43.670052 955.05553,42.433288 956.45789,41.376556 C 959.00459,39.457537 958.11054,38.360573 956.88104,37.125259 C 955.02965,35.26515 952.06131,38.141523 950.95714,39.250906 C 949.94504,40.267774 946.8031,41.463423 945.45641,41.801685 C 943.67466,42.24922 941.73037,44.09862 940.37878,44.777594 C 938.61378,45.664254 936.79892,46.420756 934.87803,46.903242 C 933.25123,47.311861 930.50953,44.639791 929.80042,43.927334 C 928.30508,42.424964 926.15309,43.238719 924.7228,41.801685 C 923.48412,40.557171 928.92137,37.975518 923.03026,37.975518 z"
     id="path2688" >
 <title>Something you want in a tooltip</title>
</path>

According to the spec:

User agents may, however, for example, display the 'title' element as a tooltip, as the pointing device moves over particular elements