Разметка и JS для tooltips

.stylelintrc

@@ -82,9 +82,6 @@
     "value-list-comma-space-before": ["never", {
       "message": "В значениях перед запятой пробел запрещен"
     }],
-    "shorthand-property-no-redundant-values": [true, {
-      "message": "Для мнемоник значения повторять не следует"
-    }],
     # "property-blacklist": [["text-rendering", "float"], {
     #   "message": "Свойство из чёрного списка"
     # }],

projectConfig.json

@@ -57,7 +57,8 @@
     "object-fit-polyfill": [],
     "embed-responsive": [],
     "pie-chart": [],
-    "fields-group": []
+    "fields-group": [],
+    "tooltip": []
   },
   "addCssBefore": [
     "./src/scss/variables.scss",

src/blocks-demo.html

@@ -1507,7 +1507,7 @@
 
     </section>
 
-    <section class="blocks-library__item  blocks-library__item--menusep" id="pie-chart" data-name=".pie-chart">
+    <section class="blocks-library__item" id="pie-chart" data-name=".pie-chart">
 
       <h2 class="blocks-library__item-title">Круговые диаграммы</h2>
 
@@ -1532,6 +1532,29 @@
 
     </section>
 
+    <section class="blocks-library__item  blocks-library__item--menusep" id="tooltip" data-name=".tooltip">
+
+      <h2 class="blocks-library__item-title">Подсказки</h2>
+
+      <span class="tooltip">
+        <button class="tooltip__btn" aria-label="more info" data-tooltip-content="Текст подсказки может быть длинным. Хочется, чтобы <em>внутри</em> <small>можно было</small> <i>использовать</i> <b>разметку</b>.">Подсказка</button>
+      </span>
+
+      <span class="tooltip">
+        <button class="tooltip__btn" aria-label="more info" data-tooltip-content="Текст.">Подсказка</button>
+      </span>
+
+      <div class="blocks-library__code-wrapper">
+        <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
+        <div class="blocks-library__code">
+          <pre class="code">
+            <code>111</code>
+          </pre>
+        </div>
+      </div>
+
+    </section>
+
 
 
 

src/blocks/tooltip/tooltip.html

+<!--DEV
+
+Для использования этого файла как шаблона:
+
+@ @include('blocks/tooltip/tooltip.html')
+
+(Нужно убрать пробел между символами @)
+Подробнее: https://www.npmjs.com/package/gulp-file-include
+
+
+
+<div class="tooltip">content</div>
+
+-->

src/blocks/tooltip/tooltip.js

+document.addEventListener('DOMContentLoaded', function() {
+
+  var allTooltips = document.querySelectorAll('.tooltip');
+
+  Array.prototype.forEach.call(allTooltips, function (tooltip) {
+
+    var tooltipBtn = tooltip.querySelector('.tooltip__btn');
+    var messageWrap = document.createElement('span');
+    var message = tooltipBtn.getAttribute('data-tooltip-content');
+
+    messageWrap.setAttribute('role', 'status');
+    tooltip.appendChild(messageWrap);
+
+    tooltipBtn.addEventListener('click', function () {
+      messageWrap.innerHTML = '';
+      // window.setTimeout(function() {
+        messageWrap.innerHTML = '<span class="tooltip__bubble">'+ message +'</span>';
+      // }, 100);
+    });
+
+    document.addEventListener('click', function (e) {
+      if (tooltipBtn != e.target) {
+        messageWrap.innerHTML = '';
+      }
+    });
+
+    tooltipBtn.addEventListener('keydown', function(e) {
+      if ((e.keyCode || e.which) === 27)
+        messageWrap.innerHTML = '';
+      });
+    });
+
+});

src/blocks/tooltip/tooltip.scss

+// В этом файле должны быть стили для БЭМ-блока tooltip, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
+// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
+
+.tooltip {
+
+  $block-name:                &; // #{$block-name}__element
+
+  position: relative;
+  z-index: 1;
+
+  &__bubble {
+    position: absolute;
+    top: calc(100% + 15px);
+    left: 0;
+    min-width: 150px;
+    max-width: 250px;
+    padding: 10px;
+    background-color: #007bff;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: -5px;
+      left: 5px;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 0 5px 5px 5px;
+      border-color: transparent transparent #007bff transparent;
+    }
+  }
+}