Add tooltips to action buttons (#22)

Author: generic-github-user

src/index.html

@@ -32,17 +32,17 @@
                   <h3>PowerNote</h3>
 
                   <div id="button-list">
-                        <button id="delete-notes-button" type="button" class="btn btn-danger btn-block">Delete</button>
-                        <button id="merge-notes-button" type="button" class="btn btn-primary btn-block">Merge</button>
-                        <button id="unmerge-notes-button" type="button" class="btn btn-primary btn-block">Unmerge</button>
-                        <button id="select-notes-button" type="button" class="btn btn-primary btn-block">Select All</button>
-                        <button id="deselect-notes-button" type="button" class="btn btn-primary btn-block">Deselect</button>
-                        <button id="sort_az-notes-button" type="button" class="btn btn-primary btn-block">Sort A &#8594; Z</button>
-                        <button id="sort_za-notes-button" type="button" class="btn btn-primary btn-block">Sort Z &#8594; A</button>
-                        <button id="deselect-notes-button" type="button" class="btn btn-primary btn-block">Export All</button>
-                        <button id="deselect-notes-button" type="button" class="btn btn-primary btn-block">Clipboard</button>
-                        <button id="deselect-notes-button" type="button" class="btn btn-primary btn-block">Undo</button>
-                        <button id="deselect-notes-button" type="button" class="btn btn-primary btn-block">Redo</button>
+                        <button id="delete-notes-button" type="button" class="btn btn-danger btn-block" data-toggle="tooltip" data-placement="right" title="Delete selected notes">Delete</button>
+                        <button id="merge-notes-button" type="button" class="btn btn-primary btn-block" data-toggle="tooltip" data-placement="right" title="Combine selected notes into one note">Merge</button>
+                        <button id="unmerge-notes-button" type="button" class="btn btn-primary btn-block" data-toggle="tooltip" data-placement="right" title="De-merge selected notes">Unmerge</button>
+                        <button id="select-notes-button" type="button" class="btn btn-primary btn-block" data-toggle="tooltip" data-placement="right" title="Select all notes">Select All</button>
+                        <button id="deselect-notes-button" type="button" class="btn btn-primary btn-block" data-toggle="tooltip" data-placement="right" title="Deselect currently selected notes">Deselect</button>
+                        <button id="sort_az-notes-button" type="button" class="btn btn-primary btn-block" data-toggle="tooltip" data-placement="right" title="Sort selected notes alphabetically">Sort A &#8594; Z</button>
+                        <button id="sort_za-notes-button" type="button" class="btn btn-primary btn-block" data-toggle="tooltip" data-placement="right" title="Sort selected notes reverse alphabetically">Sort Z &#8594; A</button>
+                        <button id="deselect-notes-button" type="button" class="btn btn-primary btn-block" data-toggle="tooltip" data-placement="right" title="Export all notes">Export All</button>
+                        <button id="deselect-notes-button" type="button" class="btn btn-primary btn-block" data-toggle="tooltip" data-placement="right" title="Import notes from clipboard (copy & paste)">Clipboard</button>
+                        <button id="deselect-notes-button" type="button" class="btn btn-primary btn-block" data-toggle="tooltip" data-placement="right" title="Undo the last action">Undo</button>
+                        <button id="deselect-notes-button" type="button" class="btn btn-primary btn-block" data-toggle="tooltip" data-placement="right" title="Redo the last undone action">Redo</button>
                   </div>
                   <!-- </div> -->
             </div>

src/script.js

@@ -263,4 +263,8 @@ $('.toast').toast({
 write_to_text();
 update_buttons();
 $(document).ready(update_textarea);
-$('#text-panel').on('input', update_textarea);
+$('#text-panel').on('input', update_textarea);
+
+$(function() {
+      $('[data-toggle="tooltip"]').tooltip()
+})