diff --git a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.css b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.css
index b91e11ad8..fa0d5babb 100644
--- a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.css
+++ b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.css
@@ -1,4 +1,9 @@
-.mimic-wrapper {
+.tooltip.show .tooltip-inner {
+ text-align: left;
+ max-width: none;
+ white-space: nowrap;
+}
+.mimic-wrapper {
overflow: auto;
overscroll-behavior: none;
position: relative;
@@ -38,7 +43,6 @@
.mimic-wrapper.view-mode .mimic .comp.wait-action {
cursor: wait !important;
}
-
.mimic-wrapper.edit-mode {
cursor: default;
}
diff --git a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.min.css b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.min.css
index 299cd313e..dc555b956 100644
--- a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.min.css
+++ b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.min.css
@@ -1 +1 @@
-.mimic-wrapper{overflow:auto;overscroll-behavior:none;position:relative;}.mimic-wrapper .mimic{background-color:#fff;background-repeat:no-repeat;position:absolute;}.mimic-wrapper .mimic .comp{box-sizing:border-box;line-height:normal;position:absolute;}.mimic-wrapper .mimic .comp.text .text-content{overflow:hidden;}.mimic-wrapper .mimic .comp.picture .picture-content{background-clip:content-box;background-repeat:no-repeat;height:100%;width:100%;}.mimic-wrapper .mimic .comp.panel{background-color:inherit;}.mimic-wrapper.view-mode .mimic .comp.invisible-state{display:none;}.mimic-wrapper.view-mode .mimic .comp.disabled-state{pointer-events:none;}.mimic-wrapper.view-mode .mimic .comp.has-action{cursor:pointer;}.mimic-wrapper.view-mode .mimic .comp.wait-action{cursor:wait!important;}.mimic-wrapper.edit-mode{cursor:default;}.mimic-wrapper.edit-mode .mimic{box-shadow:0 0 0 1px var(--bs-gray-500);}.mimic-wrapper.edit-mode .mimic .comp::before{content:"";inset:var(--border-width,0);position:absolute;}.mimic-wrapper.edit-mode .mimic .comp.selected::before{box-shadow:0 0 0 3px lime;}.mimic-wrapper.edit-mode .mimic .comp:not(.selected):hover::before{box-shadow:0 0 0 1px var(--bs-gray-500);}.mimic-wrapper.edit-mode .mimic .comp.fiction-border::before{border:1px dashed var(--bs-gray-600);}.mimic-wrapper.edit-mode .mimic .comp.picture.blank .picture-content{background-image:url("../images/picture-blank.svg");}.mimic-wrapper.edit-mode .mimic .comp.faceplate .comp:hover::before{box-shadow:none;}
\ No newline at end of file
+.tooltip.show .tooltip-inner{text-align:left;max-width:none;white-space:nowrap;}.mimic-wrapper{overflow:auto;overscroll-behavior:none;position:relative;}.mimic-wrapper .mimic{background-color:#fff;background-repeat:no-repeat;position:absolute;}.mimic-wrapper .mimic .comp{box-sizing:border-box;line-height:normal;position:absolute;}.mimic-wrapper .mimic .comp.text .text-content{overflow:hidden;}.mimic-wrapper .mimic .comp.picture .picture-content{background-clip:content-box;background-repeat:no-repeat;height:100%;width:100%;}.mimic-wrapper .mimic .comp.panel{background-color:inherit;}.mimic-wrapper.view-mode .mimic .comp.invisible-state{display:none;}.mimic-wrapper.view-mode .mimic .comp.disabled-state{pointer-events:none;}.mimic-wrapper.view-mode .mimic .comp.has-action{cursor:pointer;}.mimic-wrapper.view-mode .mimic .comp.wait-action{cursor:wait !important;}.mimic-wrapper.edit-mode{cursor:default;}.mimic-wrapper.edit-mode .mimic{box-shadow:0 0 0 1px var(--bs-gray-500);}.mimic-wrapper.edit-mode .mimic .comp::before{content:"";inset:var(--border-width,0);position:absolute;}.mimic-wrapper.edit-mode .mimic .comp.selected::before{box-shadow:0 0 0 3px lime;}.mimic-wrapper.edit-mode .mimic .comp:not(.selected):hover::before{box-shadow:0 0 0 1px var(--bs-gray-500);}.mimic-wrapper.edit-mode .mimic .comp.fiction-border::before{border:1px dashed var(--bs-gray-600);}.mimic-wrapper.edit-mode .mimic .comp.picture.blank .picture-content{background-image:url("../images/picture-blank.svg");}.mimic-wrapper.edit-mode .mimic .comp.faceplate .comp:hover::before{box-shadow:none;}
\ No newline at end of file
diff --git a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.scss b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.scss
index 579839787..43f622194 100644
--- a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.scss
+++ b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/css/mimic.scss
@@ -4,6 +4,13 @@ $component-selected-box-shadow: 0 0 0 3px lime;
$component-hover-box-shadow: 0 0 0 1px var(--bs-gray-500);
$component-fiction-border: 1px dashed var(--bs-gray-600);
+// Bootstrap tooltip override
+.tooltip.show .tooltip-inner {
+ text-align: left;
+ max-width: none;
+ white-space: nowrap;
+}
+
.mimic-wrapper {
overflow: auto;
overscroll-behavior: none;
diff --git a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-bundle.js b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-bundle.js
index a444621fb..6b66fbe1c 100644
--- a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-bundle.js
+++ b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-bundle.js
@@ -4704,12 +4704,24 @@ rs.mimic.MimicRenderer = class MimicRenderer extends rs.mimic.Renderer {
this._setCornerRadius(mimicElem, props.cornerRadius);
}
- mimicElem
- .attr("title", props.tooltip)
- .css({
- "background-color": props.backColor,
- "color": props.foreColor
- });
+ // Tooltip: native title for desktop, Bootstrap for touch devices
+ if (props.tooltip) {
+ const isTouchDevice = ('ontouchstart' in window || navigator.maxTouchPoints > 0);
+
+ if (isTouchDevice) {
+ mimicElem.prop("title", props.tooltip.replace(/\n|\r\n|\r/g, '
'));
+ mimicElem.attr("data-bs-toggle", "tooltip");
+ mimicElem.attr("data-bs-html", true);
+ mimicElem.addClass("user-select-none");
+ } else {
+ mimicElem.attr("title", props.tooltip);
+ }
+ }
+
+ mimicElem.css({
+ "background-color": props.backColor,
+ "color": props.foreColor
+ });
if (props.backgroundImage) {
let x = props.backgroundPadding.left;
@@ -5134,7 +5146,20 @@ rs.mimic.RegularComponentRenderer = class extends rs.mimic.ComponentRenderer {
this._setBorder(componentElem, props.border);
this._setCornerRadius(componentElem, props.cornerRadius);
this._setFont(componentElem, props.font, renderContext.fontMap);
- componentElem.attr("title", props.tooltip);
+
+ // Tooltip: native title for desktop, Bootstrap for touch devices
+ if (props.tooltip) {
+ const isTouchDevice = ('ontouchstart' in window || navigator.maxTouchPoints > 0);
+
+ if (isTouchDevice) {
+ componentElem.prop("title", props.tooltip.replace(/\n|\r\n|\r/g, '
'));
+ componentElem.attr("data-bs-toggle", "tooltip");
+ componentElem.attr("data-bs-html", true);
+ componentElem.addClass("user-select-none");
+ } else {
+ componentElem.attr("title", props.tooltip);
+ }
+ }
if (props.enabled) {
this._restoreVisualState(componentElem, props);
diff --git a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-render.js b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-render.js
index f57b39d5b..415914b9a 100644
--- a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-render.js
+++ b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-render.js
@@ -322,12 +322,24 @@ rs.mimic.MimicRenderer = class MimicRenderer extends rs.mimic.Renderer {
this._setCornerRadius(mimicElem, props.cornerRadius);
}
- mimicElem
- .attr("title", props.tooltip)
- .css({
- "background-color": props.backColor,
- "color": props.foreColor
- });
+ // Tooltip: native title for desktop, Bootstrap for touch devices
+ if (props.tooltip) {
+ const isTouchDevice = ('ontouchstart' in window || navigator.maxTouchPoints > 0);
+
+ if (isTouchDevice) {
+ mimicElem.prop("title", props.tooltip.replace(/\n|\r\n|\r/g, '
'));
+ mimicElem.attr("data-bs-toggle", "tooltip");
+ mimicElem.attr("data-bs-html", true);
+ mimicElem.addClass("user-select-none");
+ } else {
+ mimicElem.attr("title", props.tooltip);
+ }
+ }
+
+ mimicElem.css({
+ "background-color": props.backColor,
+ "color": props.foreColor
+ });
if (props.backgroundImage) {
let x = props.backgroundPadding.left;
@@ -752,7 +764,20 @@ rs.mimic.RegularComponentRenderer = class extends rs.mimic.ComponentRenderer {
this._setBorder(componentElem, props.border);
this._setCornerRadius(componentElem, props.cornerRadius);
this._setFont(componentElem, props.font, renderContext.fontMap);
- componentElem.attr("title", props.tooltip);
+
+ // Tooltip: native title for desktop, Bootstrap for touch devices
+ if (props.tooltip) {
+ const isTouchDevice = ('ontouchstart' in window || navigator.maxTouchPoints > 0);
+
+ if (isTouchDevice) {
+ componentElem.prop("title", props.tooltip.replace(/\n|\r\n|\r/g, '
'));
+ componentElem.attr("data-bs-toggle", "tooltip");
+ componentElem.attr("data-bs-html", true);
+ componentElem.addClass("user-select-none");
+ } else {
+ componentElem.attr("title", props.tooltip);
+ }
+ }
if (props.enabled) {
this._restoreVisualState(componentElem, props);
diff --git a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-view.js b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-view.js
index b58407116..928933d8f 100644
--- a/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-view.js
+++ b/ScadaWeb/Mimics/PlgMimic/wwwroot/plugins/Mimic/js/mimic-view.js
@@ -147,6 +147,15 @@ function updateLayout() {
alignHorizontally();
}
+// Initialize Bootstrap tooltips on all mimic elements
+function initTooltips() {
+ if (mimic.dom && typeof bootstrap !== "undefined") {
+ mimic.dom.find("[data-bs-toggle='tooltip']").each(function () {
+ bootstrap.Tooltip.getOrCreateInstance(this);
+ });
+ }
+}
+
async function loadMimic() {
spinnerElem.removeClass("d-none");
let result = await mimic.load(getLoaderUrl(), viewID);
@@ -159,6 +168,7 @@ async function loadMimic() {
mimicWrapperElem.append(unitedRenderer.createMimicDom());
toolbarElem.removeClass("d-none");
initScale();
+ initTooltips();
startUpdatingData();
startBlinking();
}