Click here to Skip to main content
12,818,816 members (29,002 online)
Rate this:
Please Sign up or sign in to vote.
See more: Javascript
I have a tree view.In child node, Onmouseover, I have to display some contents on a tool tip or popup. The content is large. As of now, i have used a popup, which is not looking good. Tooltip seems to be neat, but all my contents are not getting displayed.. Is there any way to sortout this one.. Please help,

Posted 8-Oct-12 20:42pm
enhzflep 9-Oct-12 1:52am
Not that I know of, off the top of my head - need more details first. The tooltip expands to just large enough to display it's contained text. When you say some of you content is missing, what precisely?
Moreover, what is the element's title and what is the text of the displayed tooltip?

It's not terribly difficult to replace it's functionality with your own. But first of all, perhaps there is a way to make the current one's appearance more pleasing.
Anusha Sridhar 9-Oct-12 1:59am
var oPopup = window.createPopup();
function richToolTip(Target) {
var lefter = event.offsetY + 0;
var topper = event.offsetX + 15;
oPopup.document.body.innerHTML = '<div style="position: absolute; top: 0; left: 0;' +
' border: 2px solid black; ' +
'font: normal 10pt tahoma; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,' +
' StartColorStr=gold, EndColorStr=#FFFFFF); padding: 10px;">' +
'Node Name
Node Name:' +
Target.innerText +
<br/><img src="" alt="Image"></img> <br/>' +
</div>';, lefter, 170, 120, RFPPlaceHolder_TVContent);
function AddAttributes() {
var TreeNodes = RFPPlaceHolder_TVContent.getElementsByTagName('TABLE');
for (var i = 0; i < TreeNodes.length; i++) {

TreeNodes[i].onmouseover = function setToolTip() { richToolTip(this); };
TreeNodes[i]. önmouseout = function removeToolTip() { oPopup.hide(); };

This is the javascript code i have used for popup

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

Ahhhh. Just saw this question again, you've hit the "Have a Question or Comment" button on the left. This sends an email notification to the poster of that Question or Answer. When replying to a comment, you need to hit the [<-- Reply] button on the right-hand side of the comment.

Anyhow, here's a quick whip-together job that gives you a pop up that works like a tool-tip. You an chuck html into be displayed too.[^]

Here's the one I made and an example of it's use. Obviously, you could add an attribute to the elements (perhaps mTitle) and set this to contain the tooltip's html for that element. Then you can set the contents of the popup window to reflect the value of mTitle.

I'm not sure, but perhaps you can add a style that will disable display of the standard tool-tip. If so, it would make your html cleaner and avoid any potential troubles with using custom attributes. I just read yesterday of old code that added an attribute 'translate' to elements. This used to be fine - 'recently' this attribute was added to the official spec - causing all sorts of trauma to the maintainer. poor sod!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

    Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web01 | 2.8.170308.1 | Last Updated 29 Oct 2012
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100