We are using App Studio HTML Canvas to create launch pages for some ad hoc report building. The hover text, a/k/a ToolTip, is created by typing text in the Title line within properties. We would like to make the ToolTip more visible

• Bolder Text
• Larger Text
• Shading
• Coloring
• Borders

There have been numerous discussions in Focal Point about Focal Point about ToolTips in charts and graphs ToolTips in charts and graphs. However I have not found any items about styling the hovering ToolTips in App Studio.
We do have a case open with IBI but it always helps to raise the issue among the FOCUS nation.

I am also reasonably confident that somebody will find a thread already in place about HTML Canvas and Hovering Tooltips but that is a separate discussion.

TIA as always,

This message has been edited. Last edited by: S.J. Kadish,

You mean something like this?

  htmlToolTip: { enabled: true, snap: false, sticky: true,
		fill: 'linear-gradient(to bottom, rgba(250,250,250,0.98) 8%,rgba(230,230,230,0.98) 95%)',
		border:{width: 1, color: 'rgba(150,150,150,0.95)'},
		style: {
			cursor: 'default',
			color: 'rgb(0,0,0)',
            font: '10pt ARIAL',
			boxShadow: '0px 3px 4px 0px rgba(50, 50, 50, 0.66)',
			borderWidth: '1px',
			padding: '6px 7px 7px 8px',
			"filter": "progid:DXImageTransform.Microsoft.gradient( startColorstr='#FAFAFA', endColorstr='#D2D2D2',GradientType=0)",
			'borderRadius': 0}
	},

You can go through the default IBI stylesheets like ENWARM.sty or ENDEFLT.sty and look over the HTML tooltip Properties.

This is styling the Tooltip for only JS Charts. Are you referring to Hover styling for HTML elements in your page like Edit Box, Listbox and Drop down?

Tharun - to answer your final question:

The styling is for the objects in the HTML page.
We find that adding the Title entry for the text box above the object works best for visibility. We just want to make the tips more visible for our external users.

We have been able to handle ToolTips in charts.

Thanks for responding

Courtesty of Barry Solomon with IBI Tech Support
Customizing Titles using JQuery Tooltips

To customize the titles created above, using JQuery and Internal CSS.

1. Click on the canvas to select the “DOCUMENT” object.

2. On the “Properties” panel, click the “lightning bolt” on the toolbar to show the events.

3. For the “load” event, click the column on the right to display the ellipsis button.

4. Click the ellipsis button, to navigate to the “Embedded JavaScript/CSS” view tab (in 8105M or prior) or “Embedded JavaScript” view tab (8201) of the HTML canvas.

5. After the comment lines, add a new line and type this code “$(document).tooltip();”.

6. From the “Embedded JavaScript/CSS” view tab (8105M or prior), go to the “Settings” panel, and select the “Internal CSS” radio button, to activate the internal CSS editor.

7. For 8201, just navigate to the Embedded CSS tab.

8. Enter a new line after the “body” class and type “.ui-tooltip” as the new class name and add the following CSS Styles.

Color: white;
Font-size: small;
Background: black;
Border-radius: 20px;
Add any styling that you want. The above is an example.

9. Save and run the HTML Page and mouse over on objects to show the styled tooltips.

can you please give some sample css for list box. I have tried a bunch but nothing is working for me.

below is what working for me in html but not in internal CSS tab.

li {
font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
border-bottom: 1px solid #ccc;
}

li:last-child {
border: none;
}

li a {
text-decoration: none;
color: #000;
display: block;
width: 200px;

-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
-moz-transition: font-size 0.3s ease, background-color 0.3s ease;
-o-transition: font-size 0.3s ease, background-color 0.3s ease;
-ms-transition: font-size 0.3s ease, background-color 0.3s ease;
transition: font-size 0.3s ease, background-color 0.3s ease;
}

li a:hover {
font-size: 30px;
background: #f6f6f6;
}


Thanks in advance.

I pulled this from the IBI Tech Support Center
CSS Support for Matrix Browsers