Tooltips, fixes and addition (#2006)

- Fixes for tooltips lagging and getting stuck if the pointer happens to hover over the tooltip.
- Fix for tooltips appearing behind other elements.
- Addition of tooltips for editor tools.
- Fix for tooltip appearance in related tables form.

scss/_tooltip.scss

@@ -21,6 +21,7 @@
   display: inline-block;
   opacity: 1;
   visibility: visible;
+  z-index: 100;
 }
 
 .o-tooltip:hover span[data-tooltip]::after {
@@ -36,7 +37,7 @@
   text-align: center;
   white-space: nowrap;
   width: auto;
-  z-index: 100;
+  pointer-events: none;
 }
 
 @media (hover: none) {

src/controls/editor/editortemplate.js

@@ -1,33 +1,38 @@
 export default `<div id="o-editor-toolbar" class="o-editor-toolbar o-toolbar o-toolbar-horizontal o-padding-horizontal-8 o-rounded-top o-hidden">
     <div id="o-editor-toolbar-drawtools" class="o-toolbar-horizontal">
       <div class="o-popover-container">
-        <button id="o-editor-draw" class="o-button-lg" type="button" name="button">
+        <button id="o-editor-draw" class="o-button-lg o-tooltip" style aria-label="Nytt objekt" type="button" name="button">
           <svg class="o-icon-24">
               <use xlink:href="#ic_add_24px"></use>
           </svg>
+          <span data-tooltip="Nytt objekt" data-placement="north"></span>
         </button>
       </div>
     </div>
-    <button id="o-editor-attribute" class="o-button-lg" type="button" name="button">
+    <button id="o-editor-attribute" class="o-button-lg o-tooltip" style aria-label="Formulär" type="button" name="button">
       <svg class="o-icon-24">
           <use xlink:href="#ic_title_24px"></use>
       </svg>
+      <span data-tooltip="Formulär" data-placement="north"></span>
     </button>
-    <button id="o-editor-delete" class="o-button-lg" type="button" name="button">
+    <button id="o-editor-delete" class="o-button-lg o-tooltip" style aria-label="Radera" type="button" name="button">
       <svg class="o-icon-24">
           <use xlink:href="#ic_delete_24px"></use>
       </svg>
+      <span data-tooltip="Radera" data-placement="north"></span>
     </button>
     <div class="o-popover-container">
-      <button id="o-editor-layers" class="o-button-lg" type="button" name="button">
+      <button id="o-editor-layers" class="o-button-lg o-tooltip" style aria-label="Lager" type="button" name="button">
         <svg class="o-icon-24">
             <use xlink:href="#ic_layers_24px"></use>
         </svg>
+        <span data-tooltip="Lager" data-placement="north"></span>
       </button>
     </div>
-    <button id="o-editor-save" class="o-button-lg o-disabled" type="button" name="button">
+    <button id="o-editor-save" class="o-button-lg o-disabled o-tooltip" style aria-label="Spara" type="button" name="button">
       <svg class="o-icon-24">
           <use xlink:href="#ic_save_24px"></use>
       </svg>
+      <span data-tooltip="Spara" data-placement="north"></span>
     </button>
 </div>`;

src/controls/editor/relatedtablesform.js

@@ -34,7 +34,7 @@ function relatedTablesForm(viewer, layer, feature, el) {
 
         // Add the deletebutton to the row
         if (!relatedLayerConf.disableDelete) {
-          const deleteButtonEl = createElement('button', '<span class="icon-smaller"><svg class="o-icon-24"><use xlink:href="#ic_delete_24px"></use></svg></span><span data-tooltip="Ta bort"></span>', { cls: 'compact o-tooltip hover', 'aria-label': 'Ta bort' });
+          const deleteButtonEl = createElement('button', '<span class="icon"><svg class="o-icon-24"><use xlink:href="#ic_delete_24px"></use></svg></span><span data-tooltip="Ta bort"></span>', { cls: 'compact o-tooltip hover', 'aria-label': 'Ta bort' });
           deleteButtonEl.addEventListener('click', () => {
             if (window.confirm(`Är du säker att du vill ta bort objektet ${itemTitle}?`)) {
               editdispatcher.emitDeleteChild(childLayer, feature, currChild);