0

I am trying to create admin pointers for a plugin.

First, I'm enqueuing the right assets:

        wp_enqueue_script( 'jquery' );
        wp_enqueue_style( 'wp-pointer' );
        wp_enqueue_script( 'wp-pointer' );

Then, I open an admin page, and I paste the following code in the JavaScript console.

jQuery('#menu-settings').first().pointer( 
    {
        "content":
            "<h3>Pointer header<\/h3>" +
            "<h4>Pointer subheader<\/h4>" +
            "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Levatio igitur vitiorum magna fit in iis, qui habent ad virtutem progressionis aliquantum. Rationis enim perfectio est virtus; Sed ego in hoc resisto; Quid, de quo nulla dissensio est? Duo Reges: constructio interrete. Bestiarum vero nullum iudicium puto. Si enim ad populum me vocas, eum. Mihi, inquam, qui te id ipsum rogavi? Falli igitur possumus. Quas enim kakaw Graeci appellant, vitia malo quam malitias nominare.<\/p>",
            
        "position":
            {"edge":"left","align":"bottom"},

        "pointerClass":
            "wp-pointer arrow-bottom",

        "pointerWidth": 420
    }
).pointer('open');

The above code correctly creates an admin pointer, and aligns the arrow to the bottom of the box, so that it points to the target element, in this case the "Settings" menu item.

Admin pointer pointing to the "Settings" menu item with bottom alignment

My question is, how can I do the same, but with top alignment?

I want to point to a menu item that is usually near the top of the screen, and I want the arrow to point to that item, but the rest of the admin pointer to hang downwards, so that the text is in the screen and remains readable.

So far I've tried to change the two "bottom" keywords with "top", but the arrow is at the middle of the box, and does not point to the correct target element.

Admin pointer with top alignment. Arrow does not point to the target element

I checked code in the assets wp-includes/js/wp-admin-pointer.js and wp-includes/css/wp-pointer.css but I couldn't figure out what I'm doing wrong.

Any help much appreciated.

0
1

that's a great question, Alex!

Not exactly an answer to the question, but the following will work:

jQuery('#menu-settings').first().pointer( 
    {
        "content":
            "<h3>Pointer header<\/h3>" +
            "<h4>Pointer subheader<\/h4>" +
            "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Levatio igitur vitiorum magna fit in iis, qui habent ad virtutem progressionis aliquantum. Rationis enim perfectio est virtus; Sed ego in hoc resisto; Quid, de quo nulla dissensio est? Duo Reges: constructio interrete. Bestiarum vero nullum iudicium puto. Si enim ad populum me vocas, eum. Mihi, inquam, qui te id ipsum rogavi? Falli igitur possumus. Quas enim kakaw Graeci appellant, vitia malo quam malitias nominare.<\/p>",
            
        "position":
            {"edge":"top","align":"left"},

        "pointerClass":
            "wp-pointer arrow-top",

        "pointerWidth":420
    }
).pointer('open');

This will create a pointer with an arrow on the top edge of the box, rather than the left edge. The box hangs below the target element.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.