Menu icon Foundation
Tooltip arrow position

How can I change the arrow position from left to middle?


How can I change the arrow position from left to middle?

Rafi Benkual over 5 years ago

You will need to change the default css for tooltips

/* line 67, ../bower_components/foundation/scss/foundation/components/_tooltips.scss */
.tooltip > .nub {
  display: block;
  left: 5px;
  position: absolute;
  width: 0;
  height: 0;
  border: solid 5px;
  border-color: transparent transparent #333333 transparent;
  top: -10px;

specifically the left:5px can be a % like left: 40%

Note: this % or px value is referring to the left edge of the element positioned.

Klevis Miho over 5 years ago

Thanks @Rafi. Now that I changed the position of the arrow, what is the best way to change the position of the tooltip container? Check out what the problem is

Eric Dumensil over 5 years ago

Same issue here.

I'm trying to make the tooltip container centred with the link instead of having the tooltip always aligned to the left border of the link.

Eric Dumensil over 5 years ago

Hi guys,

Last week a colleague of mine and I inspected how we could center the tooltip. It may not be the cleanest solution but we achieved it by change the 2 line below in foundation.tooltip.js

Line 201

 objPos(tip, (target.offset().top + target.outerHeight() + 10), 'auto', 'auto', target.offset().left - tip.width()/ 2 );

Line 208

 var left = target.offset().left - tip.outerWidth()/ 2 + target.outerWidth() / 2 ;

however, it have some weird behaviour when viewing tooltip on narrower window width like on iPad in portrait mode. I don't know if this is linked to the changes I made..

Hope this helps.