Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only. Moving forward, myibi is our community platform to learn, share, and collaborate. We have the same Focal Point forum categories in myibi, so you can continue to have all new conversations there. If you need access to myibi, contact us at myibi@ibi.com and provide your corporate email address, company, and name.


Connect to myibi
Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] Hover ToolTips in Portals / Dashboards Using App Studio HTML Canvas

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED] Hover ToolTips in Portals / Dashboards Using App Studio HTML Canvas
 Login/Join
 
Guru
posted
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. Smiler

TIA as always,

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


Sandy Kadish
Dev: 8.2.04- PostgreSQL
Test: 8.2.04 - PostgreSQL
Prod: 8.2.04 - PostgreSQL
 
Posts: 238 | Location: Atlanta, GA/Rehovot, Israel | Registered: May 06, 2003Report This Post
Gold member
posted Hide Post
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 Katanguru
SBOX- 8205 DEV/TEST/PROD : 8105 8205
Linux, All Outputs
 
Posts: 52 | Location: BOWL OF PASTA | Registered: October 13, 2016Report This Post
Guru
posted Hide Post
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


Sandy Kadish
Dev: 8.2.04- PostgreSQL
Test: 8.2.04 - PostgreSQL
Prod: 8.2.04 - PostgreSQL
 
Posts: 238 | Location: Atlanta, GA/Rehovot, Israel | Registered: May 06, 2003Report This Post
Guru
posted Hide Post
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.


Sandy Kadish
Dev: 8.2.04- PostgreSQL
Test: 8.2.04 - PostgreSQL
Prod: 8.2.04 - PostgreSQL
 
Posts: 238 | Location: Atlanta, GA/Rehovot, Israel | Registered: May 06, 2003Report This Post
Gold member
posted Hide Post
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.


WebFOCUS 8.1.05
Windows, All Outputs
 
Posts: 58 | Registered: November 19, 2014Report This Post
Guru
posted Hide Post
I pulled this from the IBI Tech Support Center
CSS Support for Matrix Browsers


Sandy Kadish
Dev: 8.2.04- PostgreSQL
Test: 8.2.04 - PostgreSQL
Prod: 8.2.04 - PostgreSQL
 
Posts: 238 | Location: Atlanta, GA/Rehovot, Israel | Registered: May 06, 2003Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] Hover ToolTips in Portals / Dashboards Using App Studio HTML Canvas

Copyright © 1996-2020 Information Builders