Tooltip Positioning

Page: 1

Author Post
Member
Registered: Jan 2012
Posts: 98
I had a little problem with positioning of tooltips. I found a solution though so I thought I would share it, in case it helps someone else.

The tooltip was being placed to the right of a fairly large button (about 45px high). To do this I was using
  attachToHost:true,
placement: "right",

However I found that if the cursor entered the button from the top the tooltip lined up with the top, and if it entered from the bottom it lined up with the bottom. This looked messy.

The solution was to place the tooltip on centre and then push it to the right with boxLeftAdjust.
  attachToHost:true,
placement: "center",
boxLeftAdjust: 290,


I'm now just left with one thing for the wishlist, but I'm probably getting greedy now: I would love to be able to put a little arrow on the tooltip. I think it would just require the left border to be replaced by an image, but as far as I can see there is no way of defining the borders separately.
Administrator
Registered: Aug 2008
Posts: 3382
As you were typing your post, I was typing up revisions to the fbTooltips.

In particular, the next release will not align the tooltip with the mouse position, but will rather always open in the same location relative to the host element. A large motivation for this change is that Floatbox should work mostly the same on all devices, and touch thingies don't have mice thingies.

A second change is the addition of little triangle pointy things that will protrude from the tooltip edge and point to the center of the host element. There will likely be a new option "tooltipArrowColor" which will default to match 'outerBorderColor' and can be set to 'transparent' to hide the little beggars.

So you see Grasshopper, there is a Santa clause.

Unfortunately, your helpful post will be obsolete very soon. The 'attachToHost' option will vanish (along with 'moveWithMouse') and 'boxLeftAdjust' and 'boxTopAdjust' will be undocumented legacy settings, no longer needed in any circumstances.
Member
Registered: Jan 2012
Posts: 98
This is getting spooky. The second time you've had my wishlist in hand before I even knew I was wishing for it. :)

When do you reckon you'll release those changes?
Administrator
Registered: Aug 2008
Posts: 3382
My least favourite question. My crystal ball says late this month, and is often wrong.
Member
Registered: Jan 2012
Posts: 98
That fits my own timing. Always happy to try a beta version if you have one.
Member
Registered: Jan 2012
Posts: 98
Well your crystal ball was right, and 7.2.0 is looking good. I've just gone in and tweaked all my tooltip settings to suit, and it's much simpler and more intuitive. Well done!

If I may mention one tiny little issue, the tooltip arrow pointing downward (with placement:top) seems to be 1 pixel too high. With my settings (outerBorder not specified and therefore defaulting to 1 pixel) the arrow seems to intrude very slightly into the content area. It doesn't happen with placement:left or placement:right.
Administrator
Registered: Aug 2008
Posts: 3382
The slider example on the 'Hi-Tech' tab of the demo page has been updated and improved - grab it and use it if you want.

The triangular arrows are icon font characters and it's really difficult to place those precisely. Browsers render characters with fractional pixel placement, and that placement can differ slightly between different browsers. Sliding them slightly over the border (or the content if there is no border) is preferable to the small gap that may or may not occur in some browsers if we don't do that.

I have a minor emergency with version 7.2.0 that necessitates me releasing a new 7.2.1 in the next day or two. (Floatbox links inside iframes are ignored.)

It occurs to me that I can use z-index stacking to place the tooltip arrows above the outerBorder but below the content inside that border so the overlap can be hidden on borderless boxes. It's not possible to place them under the box border, so the best strategy when an outerBorder is present is to let the arrow take on the outerBorderColor, which it does by default. I'll put this z-index stacking into 7.2.1.

I'm also sneaking a new 'arrowSize' option into the new release. The arrow size is currently set to 16px in the css.

It is my fervent wish that 7.2.1 be problem free and the last update for a while.

Page: 1