Add tooltips to HTML animation controls

Author: timhoffm

lib/matplotlib/_animation_data.py

@@ -199,24 +199,27 @@
            name="points" min="0" max="1" step="1" value="0"
            oninput="anim{id}.set_frame(parseInt(this.value));"></input>
     <div class="anim-buttons">
-      <button onclick="anim{id}.slower()"><i class="fa fa-minus"></i></button>
-      <button onclick="anim{id}.first_frame()"><i class="fa fa-fast-backward">
-          </i></button>
-      <button onclick="anim{id}.previous_frame()">
+      <button title="Decrease speed" onclick="anim{id}.slower()">
+          <i class="fa fa-minus"></i></button>
+      <button title="First frame" onclick="anim{id}.first_frame()">
+        <i class="fa fa-fast-backward"></i></button>
+      <button title="Previous frame" onclick="anim{id}.previous_frame()">
           <i class="fa fa-step-backward"></i></button>
-      <button onclick="anim{id}.reverse_animation()">
+      <button title="Play backwards" onclick="anim{id}.reverse_animation()">
           <i class="fa fa-play fa-flip-horizontal"></i></button>
-      <button onclick="anim{id}.pause_animation()"><i class="fa fa-pause">
-          </i></button>
-      <button onclick="anim{id}.play_animation()"><i class="fa fa-play"></i>
-          </button>
-      <button onclick="anim{id}.next_frame()"><i class="fa fa-step-forward">
-          </i></button>
-      <button onclick="anim{id}.last_frame()"><i class="fa fa-fast-forward">
-          </i></button>
-      <button onclick="anim{id}.faster()"><i class="fa fa-plus"></i></button>
+      <button title="Pause" onclick="anim{id}.pause_animation()">
+          <i class="fa fa-pause"></i></button>
+      <button title="Play" onclick="anim{id}.play_animation()">
+          <i class="fa fa-play"></i></button>
+      <button title="Next frame" onclick="anim{id}.next_frame()">
+          <i class="fa fa-step-forward"></i></button>
+      <button title="Last frame" onclick="anim{id}.last_frame()">
+          <i class="fa fa-fast-forward"></i></button>
+      <button title="Increase speed" onclick="anim{id}.faster()">
+          <i class="fa fa-plus"></i></button>
     </div>
-    <form action="#n" name="_anim_loop_select{id}" class="anim-state">
+    <form title="Repetition mode" action="#n" name="_anim_loop_select{id}"
+          class="anim-state">
       <input type="radio" name="state" value="once" id="_anim_radio1_{id}"
              {once_checked}>
       <label for="_anim_radio1_{id}">Once</label>