Forum Home › Forums › Development and Integration › Tooltip on mobile browser
- This topic has 9 replies, 2 voices, and was last updated 1 year, 5 months ago by Mikhail.
-
AuthorPosts
-
December 18, 2021 at 3:43 pm #9798kumajayaParticipant
On mobile browser, label property not working as a tooltip like on desktop browser. Solution:
1. Download ballon.css from https://kazzkiq.github.io/balloon.css/ and save it in scada/ScadaWeb/plugins/Scheme/css/
2. Edit scada/ScadaWeb/plugins/Scheme/Scheme.aspx, add ballon.css:
<link href="~/lib/open-sans/css/open-sans.css" rel="stylesheet" type="text/css" />
<link href="~/plugins/Scheme/css/ballon.css" rel="stylesheet" type="text/css" />
<link href="~/css/controls/notifier.min.css" rel="stylesheet" type="text/css" />
3. Edit scada/ScadaWeb/plugins/Scheme/js/schemerender.js and modify setToolTip function to:
scada.scheme.ComponentRenderer.prototype.setToolTip = function (jqObj, toolTip) {
if (toolTip) {
//jqObj.prop("title", toolTip);
jqObj.attr("aria-label", toolTip);
jqObj.attr("data-balloon-pos", "up-right");
}
};
4. Use Firefox or Chrome Beta mobile browser- This topic was modified 2 years, 3 months ago by kumajaya.
December 20, 2021 at 8:24 am #9808MikhailModeratorI confirm that this issue exists and should be fixed.
Likely, bootstrap tooltips should be used to avoid adding additional library.
Thank you for reporting.October 19, 2022 at 2:17 pm #11320kumajayaParticipant@Mikhail Somehow I can’t make Bootstrap tooltips working on SCADA 6 scheme. Still always show standard tooltips on desktop browser.
I confirm my modification works on:
https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_tooltip&stacked=hOctober 20, 2022 at 8:01 am #11322kumajayaParticipantFinally I managed to fix it: https://github.com/RapidScada/scada-v6/pull/27
October 20, 2022 at 8:45 am #11324MikhailModeratorHello,
Thank you. Will check it later when work on schemes.October 21, 2022 at 7:55 am #11328kumajayaParticipantNo problem so far on SCADA 6 but on SCADA 5, bootstrap remove background color dan image from media print! My scheme with SVG graphic background looks white 🙁 So, based on https://stackoverflow.com/a/36742058 explanation, I made a custom bootstrap without “Common CSS – Print media styles” from https://getbootstrap.com/docs/3.4/customize/ I believe SCADA 5 will be fine with that custom bootstrap version. What do you think @Mikhail?
Bootstrap tooltips placement smarter than balloon.css and my use case need tooltips support on mobile browser but I don’t want my scheme without a background on print 😀
October 21, 2022 at 1:32 pm #11330MikhailModeratorI’m not sure that Bootstrap is a good choice for schemes, because it is may be too heavy for schemes that contains thousands components.
October 22, 2022 at 12:26 am #11335kumajayaParticipantHow about by using a slim custom bootstrap? A bootstrap with tooltip only inside: https://github.com/RapidScada/scada/pull/116
October 22, 2022 at 12:35 am #11336kumajayaParticipantHi @Mikhail, how if we set our scheme completely a graphic, text globally not selectable?
October 24, 2022 at 10:14 am #11369MikhailModeratorHow about by using a slim custom bootstrap?
I replied in the comments of the pull request.
how if we set our scheme completely a graphic, text globally not selectable?
Please explain it more detailed.
-
AuthorPosts
- You must be logged in to reply to this topic.