Problem with Tooltip Appearance

Page: 1

Author Post
Member
Registered: Jun 2012
Posts: 5
Have used many versions of FloatBox over years.
Recently got latest version and installed on a development server where I am working on a project.

I have encountered a bizarre problem that I never have seen before.
I set up a test page ( https://mdwoundconsult.com/cmsCSoft/aa_fb_ajax_test.php ) that has an image with a class of fbTooltip and that has a source of a php page. The markup is:

<img src="../images/info-circle.png" class="fbTooltip" data-fb-tooltip="source:`aa_fb_ajax_content.php?name=Philip&msg=Hello` type:ajax" />

When one hovers over this image a tooltip is displayed, but its appearance is weird. It is tall and skinny with the text wrapping to fit the tiny width and there is a small upward arrow at the bottom left.

I have tried styling the div on the source page to solve the problem and have changed the tooltip class in the fbOptions.js file, but they all lead to screwy results. If I leave the css rule for the class empty and the source page with simple <p> tags alone, it still draws the tooltip with virtually no width.
Any insight would be greatly appreciated!
Member
Registered: Jun 2012
Posts: 5
Sorry, guys.
Found my error. Sorry for the trouble.
Administrator
Registered: Aug 2008
Posts: 3382
Sorry for the slow(ish) response.

It would be interesting to know what the error you found was.

In general, HTML content needs to have a width defined somewhere: either in the HTML CSS styles or with Floatbox's 'width' option. Let Floatbox measure the content height based on the constrained width provided.

Page: 1