zudolab jqTooltip

Separator

Basic element tree in the tip.

You can separate the text inside the tip.
Following code is the default tip xhtml.

<div class="tipContainer">
    <p class="title">$TITLE$</p>
    <p class="main">$MAIN$</p>
    <p class="URL">$URL$</p>
    <p class="close"><span>close</span></p>
</div>

If you associate "p.separatorTest" with the jqTooltip,
the value of "p.separatorTest"'s title attribute will be put into the tip.
Normaly, the text will be put into the "p.main".
"$MAIN$" will be replaced.
Following code is the simple example.

new jqTooltip({
    selector: "p.separatorTest",
    behavior: "chaseHover"
});

<p class="separatorTest" title="someText">separatorTest</p>

separatorTest

In this case, the xhtml code of the tip is generated as follows.

<div class="tipContainer">
    <p class="main">someText</p>
</div>

Unnecessary elements will be removed.

"p.title" will be removed if the value of the element's title is simple.

"p.main" will not be removed.
The text specified as the element's title attribute will be put here.

"p.URL" will be removed. This is the text container to show the URL of the href element.
I will explain about "p.URL" this in the next example.

"p.close" will be removed if the behavior was not "click".
This is the button to hide the tip.

How to divide tip text into title and body

You can separate the "title text" and "main text" by " --- ".
Check the following example to see the result.

<p class="separatorTest" title="tip's title --- someText">separatorTest</p>

separatorTest

In this case, the xhtml code of the tip is generated as follows.

<div class="tipContainer">
    <p class="title">tip's title</p>
    <p class="main">someText</p>
</div>

How to put <br /> in the tip

You can put "<br />" into the tip by putting " -- " in the title attribute.
Check the following example to see the result.

<p class="separatorTest" title="tip's title --- someText someText -- 
someText someText someText -- someText -- 
someText someText">separatorTest</p>

separatorTest

In this case, the xhtml code of the tip is generated as follows.
All " -- " was replaced to "<br />".

<div class="tipContainer">
    <p class="title">tip's title</p>
    <p class="main">
        someText someText<br />
        someText someText someText<br />
        someText<br />
        someText someText
    </p>
</div>

You can change the separator explained here. (" --- ", " -- ")
If you don't wan to use these str as the separator, you can change these as follows.

new jqTooltip({
    selector: "p.separatorTest",
    behavior: "chaseHover",
    separator_title: "NEWTITLESEPARATOR",
    separator_br: "NEWBRSEPARATOR"
});