Support » Plugin: footnotes » Center Alignment Available?

  • Resolved solu78

    (@solu78)


    Hello,

    When any footnote is placed to the far right-hand side of a sentence, it gets “squished” and starts to align vertically.

    Are there any settings I can adjust to always center-align the popup within the text — regardless of where the footnote is located?

    Thanks for any insight!

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Contributor pewgeuges

    (@pewgeuges)

    Hello @solu78,

    Thanks for reporting this issue, that is indeed a suboptimal behavior related to the way jQuery UI is used in the plugin, which is already a progress compared to tooltips hanging out of the window. Trying to fix it I’d suggest overriding the current .footnote_referrer_base{position:relative!important} (https://plugins.trac.wordpress.org/browser/footnotes/tags/2.7.3/css/footnotes-jqttbrpl0.min.css?rev=2521062) with position: static;, and try adding some rules for the tooltip:

    
    .footnote_referrer_base {
        position: static;
    }
    
    .footnote_tooltip {
        position: relative;
        right: auto; /* or 0? */
        left: auto;
        top: auto;
        bottom: auto;
        width: fit-content;
    }
    

    Perhaps your page layout has a right widget zone on desktop so the issue primarily affects mobile view? If so, these rules may be wrapped in a media query:

    
    @media screen and (max-width: 768px) {
    
        .footnote_referrer_base {
            position: static;
        }
    
        .footnote_tooltip {
            position: relative;
            right: auto; /* or 0? */
            left: auto;
            top: auto;
            bottom: auto;
            width: fit-content;
        }
    
    }
    

    I’m not quite sure and best would be checking directly on a page of your website.

    • This reply was modified 3 months, 4 weeks ago by pewgeuges.
    Thread Starter solu78

    (@solu78)

    Thanks for your prompt reply!

    This alignment issue exists with both mobile and desktop views.

    I don’t have coding experience, but perhaps I could try copying and pasting that code into a text editor, make those adjustments, and then paste it in the small window in the plugins’ custom CSS located on the settings page?

    Btw – Here is the link to a page on my website where you will find examples of the popup text getting “squished” (those located on the right-hand side).

    • This reply was modified 3 months, 4 weeks ago by solu78.
    Plugin Author Rumperuu

    (@rumperuu)

    Hi @solu78,

    FYI we are aware that the library we are using to render the tooltips (jQuery Tools) is very outdated, and we are working on replacing it in an upcoming major 3.0 update (you can see our discussion on this topic here).

    In the meantime, please let us know whether @pewgeuges’s suggested style rules help to alleviate the issue—as you’ve identified, just copy-paste this into the ‘Custom CSS’ tab within the Plugin settings area:

    
    .footnote_referrer_base {
        position: static;
    }
    
    .footnote_tooltip {
        position: relative;
        right: auto; /* or 0? */
        left: auto;
        top: auto;
        bottom: auto;
        width: fit-content;
    }
    
    Thread Starter solu78

    (@solu78)

    So I copied and pasted both of pewgeuges’s suggested style rules in the custom CSS tab > changed legacy to “No” > then hit save twice.

    I’ve updated and flushed my dynamic cache on my website and haven’t detected any changes.

    I also noticed that the custom CSS box is no longer there in the settings.

    Plugin Contributor pewgeuges

    (@pewgeuges)

    @solu78,

    No problem, thanks for the URL, and sorry for the CSS that does not work as intended. I’ve checked your page, and my sandbox has the same issue. Sorry for not testing earlier, as I needed to switch PHP version and install Footnotes prior to being able to do so.

    The Custom CSS settings page is okay but I should have been clearer about what “below” refers to in “Custom CSS migrates to a dedicated tab. This text area is intended to keep your data safe, and the code remains valid while visible. Please copy-paste the content into the new text area below. Set Show legacy to No. Save twice” (bold added). It actually means “below this box”, not “below this text”. So just paste the CSS into the remaining tall textarea and you will see the effect. The flat text area near the head of the page is read-only, any edits therein have no effect.

    But the added CSS with the fit-content keyword does not work as intended.

    While waiting for the script overhaul and the 3.0 release that @rumperuu refers to, you will probably be best off by switching to alternative tooltips for the time being, because these are not managed by jQuery and therefore correctly hang into the right widget area. Alongside with setting “Display alternative tooltips:” to “Yes”, you’ll need to sync them by setting “Tooltip position” to “bottom right” likewise. Perhaps optimize the width and horizontal offset just below.

    Please let the Footnotes team know if that solves the issue.

    • This reply was modified 3 months, 4 weeks ago by pewgeuges.
    • This reply was modified 3 months, 4 weeks ago by pewgeuges.
    • This reply was modified 3 months, 4 weeks ago by pewgeuges.
    Thread Starter solu78

    (@solu78)

    RE: Pewgeuges’s suggestions:

    I tried setting the referrers and tooltips to “alternative tooltips” > YES > “bottom right.” Plus, I tweaked the horizontal and vertical offsets for those and didn’t notice any changes.

    Any ideas on why the alternative tooltips aren’t responsive?

    P.S.
    I did clear the dynamic cache in my website, plus browser cache after deploying those changes.

    Plugin Contributor pewgeuges

    (@pewgeuges)

    Did you make the changes in the left-hand boxes or in the right-hand boxes?

    The alternative tooltips respond to the changes in the right-hand input fields.

    They don’t share these settings with the jQuery tooltips because of inconsistencies between the two tooltip implementations as of available values and default values.

    But after all, do you still see tall narrow tooltips instead of flat wide tooltips even after switching to alternative tooltips?

    Thread Starter solu78

    (@solu78)

    I made the changes in the right-hand boxes and was able to center the tooltips to align to the left.

    However, unfortunately, that change is global, as all of the popups get pushed to the left, which means that the footnotes on the left-hand side of the text get “squished” or run off the page to the left.

    So fixings things on the RT messed up things on the LFT. Additionally, the mobile version was a bit buggy after that change.

    I restored a backup of my site and am now back to where I started.

    It looks like I might have to wait until the new update — or perhaps I can hire a developer to custom-tweak this plugin?

    Plugin Contributor pewgeuges

    (@pewgeuges)

    @solu78,

    Please try this, to see if you like it. Works on both desktop and mobile:

    1. Referrers and tooltips > Alternative tooltips > Yes;
    2. Custom CSS:
    
    .footnote_referrer.relative {
      position: static;
    }
    
    .footnote_tooltip.position {
      position: absolute;
      left: 0;
      top: auto;
      width: 90%;
      max-width: 90%;
    }
    

    I restored a backup of my site and am now back to where I started.

    Sorry for the trouble. If the above doesn’t fix it, this may be canceled by just reverting steps 1 and 2.

    It looks like I might have to wait until the new update

    Oncoming Footnotes version 3.0, being authored by a professional developer, shall definitely be a great plugin.

    perhaps I can hire a developer to custom-tweak this plugin?

    Yes of course. One pro is that they shall implement your exact specification, resulting in you having two great plugins to choose from in the near future, one of which tailored to your website, the other with a redesigned dashboard settings page that shall spare you the trouble you experienced while using the current one.

    • This reply was modified 3 months, 3 weeks ago by pewgeuges.
    Plugin Author Rumperuu

    (@rumperuu)

    @solu78 as a potential alternative temporary solution, the following may also be helpful — it seems to work on the coffee page you shared earlier, which I assume is still using the non-alternative tooltips setting?

    
    .footnote_tooltip {
      width: 80%;
      left: 10% !important;
    }
    
    @media screen and (min-width: 768px) {
      .footnote_tooltip {
        width: 75%;
        left: 50% !important;
      }
    }
    

    This should ensure that the footnote tooltips a) do not get squished at the side of the page and b) are always visible, regardless of the display width. The first rule means that tooltips will take up 80% of the text width and display center-aligned on mobile devices, whilst the second rule means that on wider displays the footnotes will take up 75% of the text width and display right-aligned. You can change the width & left values to suit your preference.

    It looks like I might have to wait until the new update — or perhaps I can hire a developer to custom-tweak this plugin?

    footnotes is an all-volunteer project, but if you were interested in helping to fund development then we do have a donation link here. This would not guarantee feature request precedence, but it would enable us to focus more resources on getting the 3.0 update out the door asap!

    Alternatively, if you wanted to fund a developer to specifically work on this feature, freelancer sites like Upwork and Fiverr may be helpful. footnotes is licensed under the GNU GPL 3.0, so there would be no obligation to share any work done back with us, but we would certainly appreciate it if you did! 😉

    Thread Starter solu78

    (@solu78)

    Yes, I’m currently using the non-alternative setting.

    Update: The following CSS works perfectly on mobile!

    .footnote_tooltip {
    width: 80%;
    left: 10% !important;
    }

    The second rule (media screen, etc.) doesn’t appear to have any influence on desktop — regardless of settings.

    That said, if I change any of the parameters in the first rule, it will have an effect on mobile and desktop. Of course, optimizing mobile (using the first rule) influences desktop and vice versa. That said, the UX is much better on the desktop after this first rule deployment.

    Any further insight or other rules to try for desktop?

    • This reply was modified 3 months, 3 weeks ago by solu78.
    • This reply was modified 3 months, 3 weeks ago by solu78.
    • This reply was modified 3 months, 3 weeks ago by solu78.
    • This reply was modified 3 months, 3 weeks ago by solu78.
    • This reply was modified 3 months, 3 weeks ago by solu78.
    Plugin Author Rumperuu

    (@rumperuu)

    The first rule is the default set of values, and the values will only be overwritten by those in the second rule (i.e., the one wrapped in the @media query) if the user’s display is wider than 768 pixels.

    I’ve had a look at the coffee site you shared again, and it looks like both rules are being correctly applied — as I adjust the width of my display, I can see the second rule toggling on and off as expected.

    What Web browser are you using to view the site? If you are using a particularly old version, it may not support CSS media queries (see version information here), in which case the second rule will be ignored.

    Thread Starter solu78

    (@solu78)

    I cross-checked the site with multiple up-to-date browsers, so that factor is accounted for.

    This time I adjusted the second CSS rule (the one wrapped in the media query) to mimic the default values set, and presto!

    The footnote/tooltip is now appearing centered in mobile & desktop 🙂

    Btw – Thank you (and Pewgeuges) for helping troubleshoot this plugin!

    I really appreciate it and will spread the word.

    • This reply was modified 3 months, 3 weeks ago by solu78.
    Plugin Author Rumperuu

    (@rumperuu)

    No problem, glad to hear you’ve got it sorted!

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