hi can you tell me correct div codes to get the floatbox tooltip working with the formatting in .tooltipformat

i wanted to put 20px of white space around the text in the tooltip and change the font and so forth but the tooltip isnt seeing these cmds atm

http://www.theringoflight.com/noveltrol/pages/mousetest.html

would appreciate the help im a beginner to css. thanks david d

The content in a tooltip is whatever html you want to place in there. Floatbox has no options which modify or control content or its appearance. It's up to you to author and style the content as you see fit.

Most folks assign css margin to an element to create whitespace around it.

duno how but i flooked the html code
i know yur plugin works great but a demo with the html would be great for people who arnt programers tho cuz this took me like 2 days to work out

first i made code to hide the individual tooltip text from the base page, and code to format the tooltip texts

<style type="text/css">

.tooltiphide { display : none;
}

.tooltipformat { display : block;
font-family: Papyrus, Capsuula;
font-size: 14px;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
}

</style>


then in the body of the page i arranged it like this:

<div class="tooltiphide">
<div id="tooltip1">
<div class="tooltipformat">tooltip1 on mouseover
</div>
</div>
</div>
<img class="fbTooltip" data-fb-tooltip="source:#tooltip1 attachToHost:true" src="http://www.theringoflight.com/images/translate.png" />


i would appreciate any tips on this html tho if that might not work all the time or something. thanks!

d
d

Your wish for demo examples with html markup was granted long before you made it.
The demo page has examples of almost everything you can do with Floatbox and each example has the html markup it uses listed below it. The tooltip examples are on the 'Bonus2' tab. The hidden divs used for the content in those tooltip examples can of course be revealed by viewing source on the demo page.

There's a section of the Instructions devoted to tooltips and the 'Captions' section has an example hidden div for content.

As for the particular problem you are having, I really don't know the nature of the problem nor what might be causing it. Please understand that I can't solve problems when folks just tell me they have something that doesn't work and ask me why it's not working. If you can show me a live page with the problem and tell me what to look for there, I'll probably have it sorted out in about 43 seconds, but I need to work in the context of the page with the problem.

I don't see anything in particular that jumps out at me as wrong in your quoted html and css. You don't need 3 nested divs. Just one will do the trick. But whatever the problem is, I don't think its origin lies within those html snippets.

5.70 Tooltip seems to be a little regression in functionality compared to 5.20.

I use tooltips over product line items to display item thumbnails. If I mouse around randomly to different line items, the tooltip will either not display or a tooltip simply becomes orphans on the screen - both in FF and IE.

Try here:
http://www.interplas.com/ziplock-bags/2-mil-clearzip

I don't think it was this bad in 5.20 but maybe it was. Still, thanks for the release and I'm sticking to it!

-Eric

It's too bad you didn't start a new topic for this. This is not related to T666's issue (whatever that issue is). We'll just have to keep track of who is talking about what on this thread as this forum software hasn't got an easy way for me to move postings.

It looks like the problem is related to behaviour that occurs when mousing over the text inside those <tr> elements. The fbTooltip class is assigned to the table rows and it is on these elements that the mouse and touch handlers are attached. When browsers traverse child elements of a parent, the parent's mouseout fires, immediately followed by another mouseover. The Floatbox tooltips are supposed to ignore these quick outs and overs, but we can see on your page the tooltip quickly closing and re-opening when the mouse transits the text boundary. I'm going to have to tear into this and see if I can prevent that behaviour in the next release. On your page, I can mouseover the blank space in the table rows until the cows come home with no issues occurring.

I think we can prevent the issue on your page in the current version by turning off all timing related behaviours for the tooltips. You may wish to try setting "fadeDuration:0 mouseSpeed:1 delay:0" for your tooltips and see if your tests confirm my experience. The downside is, the tooltips will be too hyper-active and will popup on every quick mouse transit, making the page appear as if it's jacked up on too much coffee.

hi in relation to my post everything is working good now
i just had some issues with learning the html
but i worked it out now
i found the bonus 2 page also
and ill copy some of your html codes from there too
thanks!

hi actually i have 1 new problem:

http://www.theringoflight.com/noveltrol/pages/mousetestbase.html

this page opens 'mousetest.html' in a fb window

http://www.theringoflight.com/noveltrol/pages/mousetest.html

however the tooltip formating is not showing here

but if i open the 'mousetest.html' directly in the browser then the text formating shows in the tooltip

can you tell me what ive done wrong with my css. thanks david d

When the hidden div content is opened in a tooltip, that content and tooltip is attached to the base document. The css rules are in the child iframe document and apply only to elements attached to that iframe's document. Move the styles to the base (top) document.

cool thanks that worked!