@formixru/b2b-ui 1.2.1 → 1.3.0

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## v1.3.0
+
+- Добавленена поддержка `data-tooltip-image` для вывода изображений во всплывающих подсказках
+
 ## v1.2.1
 
 - Исправлены стили в .pagination-group

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@formixru/b2b-ui",
-    "version": "1.2.1",
+    "version": "1.3.0",
     "type": "module",
     "repository": {
         "type": "git",

package/src/components/tooltip/index.js

@@ -5,8 +5,12 @@ import { errorHandler } from '../../helpers/error-handler.js';
 
 export const init = async ($b) => {
     const { createTooltip } = await import('@advdominion/tooltip');
+
     const title = $b.dataset.tooltipTitle;
-    const content = title ? `<div class="tooltip__title">${title}</div>${$b.dataset.tooltip}` : $b.dataset.tooltip;
+    let content = title ? `<div class="tooltip__title">${title}</div>${$b.dataset.tooltip}` : $b.dataset.tooltip;
+    if ($b.dataset.tooltipImage) {
+        content = `<img class="tooltip__image" src=${$b.dataset.tooltipImage} alt="">`;
+    }
 
     return new Promise((resolve) => {
         if ($b._tooltip) {

package/src/components/tooltip/index.scss

@@ -109,4 +109,10 @@ $b: '.tooltip';
 
         @include font($tooltip-title-font);
     }
+
+    &__image {
+        max-height: $tooltip-image-max-height;
+        object-fit: contain;
+        width: 100%;
+    }
 }

package/src/variables.scss

@@ -995,6 +995,8 @@ $tooltip-dark-color: $font-color-inverted !default;
 
 $tooltip-title-font: ('font-size': $font-size) !default;
 
+$tooltip-image-max-height: 300px !default;
+
 // .action-list
 
 $action-list-link-color: $color-grey-70 !default;