Merge pull request #859 from trimble-oss/dev/coliff/tooltip-delay

Update Tooltips specs to mention 350m delay

content/components/web/tooltips/_index.md

@@ -16,7 +16,7 @@ tags: [usage]
 
 ## Overview
 
-A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It typically appears after a small delay and disappears when "Escape" is pressed or on mouse out.
+A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It typically appears after a small delay and disappears when <kbd>Esc</kbd> is pressed or on mouse out.
 
 <div style="max-width: max-content">
   <div class="guide-sample">

content/components/web/tooltips/styles.md

@@ -18,6 +18,7 @@ tags: [styles]
 - Top and bottom pointers can be positioned (in addition to center) from left or right. The pointer is then placed relatively 16px from the edge of the tooltip. Non-centered pointer is used, for example, when a tooltip points to a control placed at the edge of the screen.
 - The container of the tooltip text may be aligned to start, center or end.
 - Do not make the tooltip larger than the element it appears from.
+- Tooltips should have a 350ms before appearing.
 
 <img src="/img/components/tooltips-positions.svg" class="img-fluid" width="800" height="300" alt="Tooltip positions"/>
 <style>

layouts/_default/baseof.html

@@ -17,7 +17,8 @@
     var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
     var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
       return new bootstrap.Tooltip(tooltipTriggerEl, {
-        trigger: 'hover'
+        trigger: 'hover',
+        delay: { "show": 350, "hide": 0 }
       });
     });
   </script>