Tooltip sizing post 4.4.4.4

[BenR]

Alexander,

The latest revision (v4.4.4.4) alters the handling of Tooltips…

I’ve found that the sizing of the floating Tooltip box is a problem, as illustrated in the image below. In comparison to v4.4.3.65, the boxes are smaller horizontally, causing a scroll-bar at bottom that is very small and difficult to manipulate.

In my configuration, I had changed the color of the dialog header (on-click) and boarder as follows (on-hover):

/* Header of tooltip call-out */
div.tooltipHolderHead {
    background-color: #5fa364;
}

/* Border color of tooltip call-out */
span.tooltipContents {
    border: 1px #5fa364 solid;
}

My current state is that I have rolled back to v4.4.3.65.

Thank you for your support and efforts!

R’grds – Ben.
Reference:
Attempting:
Version information
DFFS frontend: 4.4.4.4 – August 07, 2019
DFFS frontend CSS: 4.49 / 4.49
Autocomplete: 1.6.36 – July 31, 2019
Cascading dropdowns: 3.7.30 – July 21, 2019
jQuery: 1.12.4
Lookup: 1.1.17 – July 21, 2019
Resource management: not loaded
SPJS-Utility: 1.336 – July 21, 2019
vLookup: 2.2.135 – July 31, 2019

Rollback:
Version information
Custom DFFS-folder: DFFS_v4.4.3.65_2019-03-31
DFFS frontend: 4.4.3.65 – March 31, 2019
DFFS frontend CSS: 4.46 / 4.46
Autocomplete: 1.6.28 – January 12, 2019
Cascading dropdowns: 3.7.26 – March 31, 2019
jQuery: 1.12.4
Lookup: 1.1.16 – March 05, 2019
Resource management: not loaded
SPJS-Utility: 1.332 – March 05, 2019
vLookup: 2.2.129 – March 07, 2019

Attachments:

1. 

   Tooltip-Post-4.4.4.4.png
   

[Alexander Bautz]

Sorry about that – I obviously didn’t test all sizes of tooltips. Can you try this snippet in your Custom JS to see if it calculates better?

Please note that you must use the new v4.4.4.4 to test it – I don’ think it will work in the old version.

spjs.dffs.showTooltip = function (elm) {
    var id = jQspjs(elm).attr('fin'), val, inner = jQspjs("#tooltipHolderInner");
    jQspjs(inner).css({ "width": "auto" }).html("");
    if (spjs.dffs.fields[id] !== undefined) {
        jQspjs("#tooltipOuterWrap").prependTo(jQspjs(elm).parent());
        val = spjs.dffs.buildValStr(spjs.dffs.data.tooltipObj[id]);
        val = spjs.dffs.translateStringWithJSON(val);
        jQspjs("#tooltipOuterWrap").show();
        jQspjs(inner).html(val);
        jQspjs("#tooltipPlaceholder").css({ "display": "inline", "position": "absolute", "top": 20, "left": 20 }).stop(true, true).fadeIn(200, function () {
            var h, w, tot, nw;
            h = jQuery(inner).height();
            w = jQuery(inner).width();
            // Calculate aspect ratio
            tot = h + w;
            if (tot < 200) {
                nw = tot + 10;
            } else {
                nw = (tot / 5 * 3) + 10;
            }
            jQuery(inner).css({ "width": nw + "px" });
        });
    }
};

Alexander

[Alexander Bautz]

I have addressed this issue in v4.4.4.5 – please check it out: https://spjsblog.com/2019/08/12/dffs-package-updated-to-v4-4-4-5/

Alexander

[BenR]

Alexander,

This correction in v4.4.4.5 has addressed this issue nicely!

I found that I did not need to use the width override at all – your default method of width calculation worked quite well for my Tooltips throughout my forms (both short and long, multiline Tooltips).

As always, your support and efforts are appreciated!

R’grds – Ben.
P.S.: I’ve now upgraded to v4.4.4.5 in production!

[Alexander Bautz]

Thanks for the feedback – I’m glad it worked out.

Alexander

[Author]

Posts