Hint Styles

With CodeThatHint you can specify various hint properties:

Hint width and height

Hint x/y coordinates

HTML-code inside the box

Background color, background image, CSS

Hint borders

Different types of positioning : absolute, relative to mouse pointer, relative to Object

The other filters (for MSIE only)

You set initial property values at the time you create hint object.

Example - Different type of positioning

You can see an example and complete code here [popup]

Then you can change some of this properties by using special CodeThatHint methods:

.HTML(html) - change HTML code inside the hint. You should set 'html' variable from the beginning

.bgColor(color) - change background color

.bgImage(image) - change background image

.CSS(css) - change CSS style

.appHTML(html) - add addition HTML-code to an existent

After you create hint object you might use the structure like this:

<form>
<input type=button onclick="cthint1.bgColor('#AACCAA')" value="Set color"><br>
<input type=button onclick="cthint1.CSS('purple')" value="Set title"><br>
<input type=button onclick="cthint1.appHTML('Copyright')" value="Add HTML"><br>
</form>

Example - Change Hint Properties

You can see an example and complete code here [popup]

Also You Can Use Advanced Properties:

Advanced Borders - set properties for box borders

brd { color : string, // border color width : integer, // border width bgimg : url, // border background image // you can specify all the borders separately // (can be omitted) t : // top border { color : string, // border color width : integer, // border width bgimg : url, // border background image }, b : // bottom border { ... }, l : // left border { ... }, r : // right border { ... } }

Example - Hint with Original Borders

You can see an example and complete code here - Custom borders for the hint [popup]

Complex content, shadow and opacity - set complex HTML content inside hint, create double hint object as shadow and set opacity as filter.

Common syntax for use filter is

filtertype1(parameter1, parameter2, ...) [filtertype2([parameter1, parameter2)]...

For example you can set opacity as

Alpha(Opacity = o) // o is level of the opacity. // 0, the default, is fully transparent; 100 is fully opaque.

Except opacity you can use various filters that MSIE support:

Alpha - Sets a transparency level.

Blur - Creates the impression of moving at high speed.

Chroma - Makes a specific color transparent.

Grayscale Drops color information from the image.

Wave Creates a sine wave distortion along the x-axis.

XRay Shows just the edges of the object.

and others

You can see an example and complete code here - Opacity, complex content and shadow Example [popup]

Read more about CodeThatHint >>