Center Alignment Available?

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 2 years, 8 months ago by pewgeuges.

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;
}

@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 2 years, 8 months ago by pewgeuges.
• This reply was modified 2 years, 8 months ago by pewgeuges.
• This reply was modified 2 years, 8 months ago by 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?

@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 2 years, 8 months ago by pewgeuges.