WordPress.org

Ready to get started?Download WordPress

Forums

Tippy
Location is off (5 posts)

  1. mariska88
    Member
    Posted 5 months ago #

    Hi,

    In the settings I have positioned Tooltips under the Tippy link, but for some reason it shows up at the top of the page. Yesterday it still worked, and I can't figure out if I did something wrong with the coding..

    The page is: http://tipsthailand.nl/algemeen/voor-vertrek/inpaklijst/

    You can find the Tippy links under the small 'i' icons.

    Thank you!!

    https://wordpress.org/plugins/tippy/

  2. Chris Roberts
    Member
    Plugin Author

    Posted 5 months ago #

    I see what it's doing, but I'm getting rusty on my own plugins so I'm having to think back to the best way to address it.

    One thing you can try: in your dashboard Tippy settings, look for the Calculate Position option, the last one on the right column, and change it to "Relative to the document" and see if that does it.

  3. mariska88
    Member
    Posted 5 months ago #

    Hey Chris,

    Thanks for your quick reply, I appreciate it. I'm afraid your suggestion doesn't work though, now the textbox pops up on the right side of the screen, and kind of falls outside the column.

    I did make some css changes, but I doubt that is the problem because I tested it right after the adjustments and it worked fine.

  4. Chris Roberts
    Member
    Plugin Author

    Posted 5 months ago #

    Here's what's happening. The actual tooltips go into the markup at the end of a post rather than where you place the tippy shortcode. I did it this way because of issues with some nested block-level elements (in particular, a div inside a paragraph tag). The tooltip is set position: absolute and positioned accordingly. This means its parent element (usually .entry) needs to be position: relative. This often works fine, but there can be a problem if the tooltip link is inside a position: relative element.

    In your case, your tooltip links are inside your .grid elements. When the jQuery code calculates the link's position (in order to know where to place the tooltip), positions are calculated relative to .grid rather than .entry, since .grid is the closest relative element. This is why the tooltips are showing way too high: position is being calculated on a much smaller scale than it should be.

    Two ways to handle this:

    Remove relative position from .grid. This would be the easiest approach and if you don't need those grid blocks position relative, that's what I'd recommend.

    It's also possible to tell Tippy to use a different container when displaying the tooltip. This one takes extra work and still might not work quite right (if you want to try it, try it for just one tooltip and see how it does). Every div containing a tooltip would need either a unique id or a unique classname. You might call the first one something like <div id="essentieeldocumenten" class="grid one-fourth"> Then in the tippy tooltip itself, add a container attribute: [tippy title="I'm a tooltip" container="#essentieeldocumenten" This way, the tooltip will be displayed relative to the specified container rather than where it's initially placed in the markup.

  5. mariska88
    Member
    Posted 5 months ago #

    Hi Chris,

    I appreciate your extensive reply, but I'm afraid both solutions didn't work. When I changed the .grid position from relative to absolute, it completely messed up my layout.

    After that I tried using div's, but just like you said, it's a lot of work & it might not work - which it didn't, even after tweaking the HTML.

    So I guess I'll have to find another way to use tooltips, maybe I should just add alt tags and shut up about it :).

    Thanks anyway, have a good weekend!

Reply

You must log in to post.

About this Plugin

About this Topic