Docs

[hjuskewycz]

I added tooltips for small (?) icons here: https://lingohub.com/pricing/

The problem on the last pricing column is that the tooltip is not exactly at the top of the icon and also the arrow is somewhere inside the tooltip. I think it is floating left because the pricing column is restricting the tooltip’s container.

I can’t use any options (like container or viewport) from bootstrap: http://getbootstrap.com/javascript/#tooltips-options
Because it is not supported by the x_extra shortcode.

How can I fix this layout bug?

[Rupok]

Hi there,

Thanks for writing in! It seems you have added the below code on your Child Theme :

.x-pricing-column-info ul > li {
  background: #f2f5f7 none repeat scroll 0 0 !important;
  border: medium none !important;
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
  padding: 0 6px 10px 28px;
}

I can see the padding: 0 6px 10px 28px; shrinking the area. So you can try decreasing the left padding and check again.

Cheers!

[hjuskewycz]

I am not sure what this should do, that is not the solution I was looking for 😉

I just want the tooltip to be in the right position and not floating to the left because the container isn’t big enough.. is there no other solution?

because otherwise I will overwrite the tooltip CSS for the ones in the pricing columns!

[hjuskewycz]

Another problem is using mobile:

with iPhone using Safari:
– the tooltip doesn’t disappear again when clicking outside, when clicking on an open tooltip the site jumps to the beginning

with Android using Chrome:
– Tooltip does disappear when clicking outside, but always when clicking on a tooltip link the site jumps to the beginning (href=”#”)

How can I fix these problems?

When trying both phones with the original bootstrap site everything works as expected:
http://getbootstrap.com/javascript/#tooltips

[Rad]

Hi there,

Please add this CSS for tooltip arrow.

.tooltip.top .tooltip-arrow {
    top: auto !important;
}
.tooltip {
    width: 130px;
}

The positioning is due to tooltip width and icon width. Hence restricting it to 130px somehow fixes the compression that causes the misalignment.

About your other issues, that’s because your link has href="#". Try changing it to href="javascript:void();". As for safari, I think it’s a browser bug. For example, they are affected here https://github.com/twbs/bootstrap/issues/16028 too and until now, they still don’t have a clear fix. I’ll continue checking but I can’t guarantee a result.

Thanks!

[Author]

Posts