Tooltip on mobile browser

Forum Home Forums Development and Integration Tooltip on mobile browser

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #9798
    kumajaya
    Participant

    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.
    #9808
    Mikhail
    Moderator

    I confirm that this issue exists and should be fixed.
    Likely, bootstrap tooltips should be used to avoid adding additional library.
    Thank you for reporting.

    #11320
    kumajaya
    Participant

    @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=h

    #11322
    kumajaya
    Participant

    Finally I managed to fix it: https://github.com/RapidScada/scada-v6/pull/27

    #11324
    Mikhail
    Moderator

    Hello,
    Thank you. Will check it later when work on schemes.

    #11328
    kumajaya
    Participant

    No 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 😀

    #11330
    Mikhail
    Moderator

    I’m not sure that Bootstrap is a good choice for schemes, because it is may be too heavy for schemes that contains thousands components.

    #11335
    kumajaya
    Participant

    How about by using a slim custom bootstrap? A bootstrap with tooltip only inside: https://github.com/RapidScada/scada/pull/116

    #11336
    kumajaya
    Participant

    Hi @Mikhail, how if we set our scheme completely a graphic, text globally not selectable?

    #11369
    Mikhail
    Moderator

    How 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.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.