Formatting tooltips joys and pains ...

[ffurger]

Hi:

I found out that one can actually use CSS classes and IDs to format titles, subtitles, paragraphs, lists etc. in a tooltip. That way one can style all tool tips with an external CSS stylesheet without going through the skin editor for style changes. Handy!

BUT there is an issue: pano2VR accepts the external formatting without complaining, but it adds a <br> after each tag pair - which defeats the whole purpose of having a style sheet.

I looked at the code generated by pano2VR. I am not entirely certain, but this seems due to the CSS property "white-space: pre-wrap" pano2VR inserts in each tooltip div. As far as I can tell there doesn't seem a way to prevent this from happening using the skin editor.

Is there a way to prevent pano2VR to mess with my stylesheets or to get around this issue?

Thank you very much in advance for your help!

-Franco

[thomas]

Hello Franco,

this behavior is controlled by the word wrap check box, If you disable it, will have "white-space: nowrap;".

Screenshot 2014-04-10 15.32.01.png (69.65 KiB) Viewed 5136 times

[ffurger]

Well, that's not really what I am talking about. Consider a text box, "Word wrap" is unchecked. In that text box enter the following text:

Code: Select all

<p>this is a paragraph</p>
<p>this a second paragraph</p>

What I'd like to see is this:

this is a paragraph
this a second paragraph

What I get instead is this. There is an additional <br> between the two paragraphs.

[Hopki]

Hi,
If your using <p> tags then you will get a space between the lines?
Have a look at this webpage to reduce the space.
Regards,
Hopki

[ffurger]

Well, no.

The output code contains an extra <br>, and my <p> tags are formatted through an external CSS stylesheet so as to control spacing, i.e. margin: 0; padding:0;

I have drawn borders around them, to be sure. See attached screenshot.

[JimWatters]

What happens if the text is entered in one line.

Code: Select all

<p>this is a paragraph</p><p>this a second paragraph</p>

[ffurger]

That didn't make any difference. On the other hand, I DID find a solution to this mess. It goes like this:

1. In your text box, simply enter a div and define an ID or a class for it, for example id="ttDiv".
2. In the div enter your text and format it using any CSS selector you wish.
3. Create a stylesheet if you don't already have one and add the following css rule:

Code: Select all

#ttDiv { 
    white-space: regular;
}

That's it! Add your background color, font-size, margin, padding etc. as you wish. Note that if you define a tooltip class you'll be able to edit/change your tool tips formatting by just modifying this one rule. No need to go through all tooltips in the skin.

One more thing. For this solution to work, in the skin check "auto-size" and "word-wrap".

Hope this might be of some help,
Franco