Hi, I am a beginner.

I am having trouble with your tooltips inside a Tab content only showing half the tooltip. I have purposely moved the tooltip left by adding the following for demonstration purposes. (I don't want to lock my tooltip links to left side of the page only as I have done. If the link was on the right side of the page the same problem I have forced here would happen)
.left span {
left: -100px;
}
Please see: /* link removed */ and then select the Biomer tab.

Best Regards
Peter Vandermey

Hi Peter,

your tab container uses overflow: hidden and relative positioning. Since the tooltip is contained in this tab container, it cannot go past these boundaries, and therefore partially gets hidden when the trigger is hovered. What you can do is to create 2 different classes, similar to the one in your example:

.left span for tooltips on the left side, use a positive offset
and
.right span for tooltips on the right side, use a negative offset

Now all you have to do is to assign to the single tooltips the correct class, those on the left side the left class and those on the right side the right class. This will make sure the tooltips are inside the container and won't get hidden.


maike

Hi Maike,

That was the only solution I could come up with too. There is a problem though. This website is responsive, so I do not know how to automatically change the left or right offset depending on where the link is. Do you have any ideas?

Currently my links are float left, so I can be sure where they are, but this is not a good solution.


Have a look at: /* link removed */

I have also tried a tooltip from the same author as the tab container. His one will overlap with a simple tooltip (2nd from bottom), but not with one that contains and image (3rd from bottom).

The template also comes with bootstrap which has a tooltip that overlaps well, can be formatted, but I can't figure out how to put an image in it. (bottom right) Do you have any clues? Why can this tooltip overlap, but your one can't?

Best Regards
Peter Vandermey

Hi Peter,

the tooltips you mention are both JavaScript based, so they can change the HTML dynamically, e.g. copying the tooltip to another place within the whole HTML.

Our tooltips are purely HTML/CSS based, this means the tooltip itself is contained in the parent element and cannot go past these boundaries.

Here's a link to the bootstrap tooltips documentation, maybe this helps you any further:
getbootstrap.com/javascript/#tooltips


maike