Tooltip Placement in V7

Page: 1

Author Post
Member
Registered: Jan 2012
Posts: 98
Sorry to pester you again, Admin. Tooltips seem to be doing some funny things.

My tooltip settings in fbOptions are
  fbTooltip: {  // general tooltip options
attachToHost:true,
placement: "right",
padding: 10,
boxCornerRadius: 0,
boxLeftAdjust: 10,
textColor: "36c",
outerBorderColor: "#666",
contentBackgroundColor: "#fff"
},
icons: { // tooltips attached to the icon button
placement: "left",
maxContentWidth: 200
}

The anchors with the class "icons" are positioned on the right edge of the window so I set placement:left. However when I do that the tooltip appears on the far left of the window, and not just to the left of the anchor. At the moment the only way I can get the tooltip in roughly the right position is to set attachToHost:false but that makes the tooltip a little wayward, depending on the cursor position.

While fiddling around I also noticed that placement:bottom puts the tooltip above the anchor, just like placement:top.
Administrator
Registered: Aug 2008
Posts: 3382
Probably for the placement:bottom tooltip, there's not enough room below the host element to fully display the tooltip. The Floatbox code will move a tooltip as necessary to make sure it renders within the viewable screen.

For the other placement problems, I would need to see it in action on a live page to determine what's up.
Member
Registered: Jan 2012
Posts: 98
The page is www.littlehotels.co.uk/myfamilyroots/.

The "Cluster Icons" link at top right is defined by
<a href="index.php" class="fbTooltip icons" data-fb-tooltip="source:#ttcluster" onClick="document.cluster.submit();">

The fbOptions are as in my previous post.

With placement:left, the tooltip goes to the far left of the window instead of sitting just to the left of the link.

With placement:top the tooltip lies over the top of the link (because Floatbox pushes it down to stop it disappearing out of the window).

With placement:bottom the floatbox is exactly like placement:top.
Administrator
Registered: Aug 2008
Posts: 3382
The tooltips open adjacent to the host element they are assigned to. On that familyroots page, the fbTooltip class is assigned to an <a> element that has href="index.php". This <a> element contains a <form> and a <div> with a class of "mapmenu". (It is a violation of the HTML spec to place block elements such as divs and forms inside inline elements such as anchors (links), but this is not germane to the tooltip positioning issue.)

To have the tooltip to open adjacent to the .mapmenu div, put the fbTooltip class and data-fb-tooltip attribute on that div. Or the fbTooltip stuff could be placed on the <h2> element inside that div for more precise targeting to just the text.

The current host element (the <a>) is positioned at 0,-12 (i.e., 12px above the document's top-left corner) and is 0px wide and 15px high. That is the layout that any tooltips assigned to it will base its positioning on, with any necessary adjustments to move the tooltip onto the viewable screen.
Member
Registered: Jan 2012
Posts: 98
There's always a reason! I've moved the tooltip to the div and it's working right now.

It's only an experimental page for now so I won't worry too much about the block and in-line thing for now, though it's interesting to note that the W3C Validator didn't pick that up.

Thanks.
Administrator
Registered: Aug 2008
Posts: 3382
Prompted by your report that the w3c validator doesn't complain about about block divs and forms inside inline <a> elements, I did some research.

Apparently, that's old news; correct for HTML 4. HTML5 does, in certain contexts, permit block elements inside inline <a> elements, although they now refer to 'block' elements as 'flow content' and inline elements as 'phrasing content'. The <a> element is now referred to as a 'transparent' type.

Here's how the spec puts it:
Quote
Some elements are described as transparent; they have "transparent" in the description of their content model. The content model of a transparent element is derived from the content model of its parent element: the elements required in the part of the content model that is "transparent" are the same elements as required in the part of the content model of the parent of the transparent element in which the transparent element finds itself.

What could be more transparent??? :shock:

Page: 1