Тултипы: завершил стилизацию

src/blocks-demo.html

@@ -1536,13 +1536,12 @@
 
       <h2 class="blocks-library__item-title">Подсказки</h2>
 
+      <p>
+        Текст
         <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>
+      </p>
 
       <div class="blocks-library__code-wrapper">
         <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>

src/blocks/tooltip/bg-img/info.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 330"><path d="M165 0C74.02 0 0 74.02 0 165c0 90.982 74.02 165 165 165s165-74.018 165-165C330 74.02 255.98 0 165 0zm0 300c-74.44 0-135-60.56-135-135C30 90.563 90.56 30 165 30s135 60.562 135 135c0 74.44-60.56 135-135 135z"/><path d="M164.998 70c-11.026 0-19.996 8.976-19.996 20.01 0 11.022 8.97 19.99 19.996 19.99 11.026 0 19.996-8.968 19.996-19.99 0-11.034-8.97-20.01-19.996-20.01zm.002 70c-8.284 0-15 6.716-15 15v90c0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15v-90c0-8.284-6.716-15-15-15z"/></svg>
\ No newline at end of file

src/blocks/tooltip/tooltip.scss

@@ -2,6 +2,10 @@
 // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
 // Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
 
+$gray:                        hsl(0, 0%, 50%) !default;
+
+$line-height:                 1.375em !default;
+
 .tooltip {
 
   $block-name:                &; // #{$block-name}__element
@@ -9,14 +13,34 @@
   position: relative;
   z-index: 1;
 
+  &__btn {
+    display: inline-block;
+    width: $line-height;
+    height: $line-height;
+    overflow: hidden;
+    border: none;
+    color: transparent;
+    background: transparent;
+    background-image: svg-load('../blocks/tooltip/bg-img/info.svg', fill='#{$gray}');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 1em;
+  }
+
   &__bubble {
     position: absolute;
-    top: calc(100% + 15px);
-    left: 0;
+    top: 100%;
+    left: -3px;
     min-width: 150px;
     max-width: 250px;
-    padding: 10px;
-    background-color: #007bff;
+    padding: 10px 15px;
+    background-color: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+
+    @supports ( filter: drop-shadow(0 0 0) ) {
+      box-shadow: none;
+      filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
+    }
 
     &:before {
       content: '';
@@ -27,7 +51,7 @@
       height: 0;
       border-style: solid;
       border-width: 0 5px 5px 5px;
-      border-color: transparent transparent #007bff transparent;
+      border-color: transparent transparent #fff transparent;
     }
   }
 }