Menu icon Foundation
Tooltips - Tip Left not quite working right

I'm trying to use the "tip left" class modification, like in the code snippet below.

You can see my test codepen here (tooltip is in the upper right-hand box):
http://codepen.io/justmonk/full/LdhwB

The tooltip pop-up is kinda just showing up on top at large & medium with the indicator on top, at small the tooltip is showing up below the linked text and the indicator is more aligned with the link.

On the Docs page the tooltip for "Tip Left" works awesome. I'm trying to figure out what's different, I'm pretty sure we didn't modify or change anything in the tooltips plugin that we use. The only thing we've changed are our default breakpoints.... would that affect tooltip behavior?

Any other thoughts our insights would be greatly appreciated.

<span data-tooltip class="has-tip [tip-left]" title="tooltip pop-up text goes here"> [?]</span>
            

         

tooltiptip left

I'm trying to use the "tip left" class modification, like in the code snippet below.

You can see my test codepen here (tooltip is in the upper right-hand box):
http://codepen.io/justmonk/full/LdhwB

The tooltip pop-up is kinda just showing up on top at large & medium with the indicator on top, at small the tooltip is showing up below the linked text and the indicator is more aligned with the link.

On the Docs page the tooltip for "Tip Left" works awesome. I'm trying to figure out what's different, I'm pretty sure we didn't modify or change anything in the tooltips plugin that we use. The only thing we've changed are our default breakpoints.... would that affect tooltip behavior?

Any other thoughts our insights would be greatly appreciated.

<span data-tooltip class="has-tip [tip-left]" title="tooltip pop-up text goes here"> [?]</span>
            

         
Lyn almost 5 years ago

Hey there,

You maybe just want to remove brackets around "tip-left" so that it looks like that :

<span data-tooltip class="has-tip tip-left" title="tooltip pop-up text goes here"> [?]</span>

Regards,

Lyn.

Monk almost 5 years ago

Changed, updated the link, I'm still not getting the nice box on the left of the tool tip link like foundation shows on their docs page.

Link:
http://codepen.io/justmonk/full/LdhwB

Updated code:
<span data-tooltip class="has-tip tip-left" title="Limited to one puppy per customer. Unless we decide you really need 2."> [?] </span>

Brandon Arnold almost 5 years ago

Hey Monk,
This is what i'm getting on hover, is that not correct?

http://cl.ly/image/3y2y2e2M401W

Lyn almost 5 years ago

Hey there,

I'm getting the same as Brandon is. Isn't it what you wanted ?

Regards,

Lyn.

Monk almost 5 years ago

Actually the rentapuppy test page is working considerably better than the actual page I'm currently prototyping.

Brandon I emailed you a link to the actual page if you'd like to take a look. In particular I'm having issues with tooltip behavior on iOS mobile devices, the tooltips pop-up text showing up off-screeen on ipad, and somewhere above and out of sight on the iPhone.

Currently rethinking our existing tooltip strategy.