Tooltip for a database driven listbox

[JeroenDortmans]

Is there a way to make a tooltip for a database driven listbox without using client side code?
When not does anybody know a way to develop this?

Thx

 

[vbkris]

nope there is no way to do that without client side code (i guess u are meaning Javascript)...

Known is handfull, Unknown is worldfull

 

[JeroenDortmans]

Yes, with client side scripting I mean Javascript.
Can anybody give me a good example how I can make a tooltip for a ASP.NET listbox using JavaScript. The lsitbox gets it's data from a database.

 

[vbkris]

try this:

<script>
function ShowHelp(TheListBox)
{
	document.getElementById("Help").style.display=""
	document.getElementById("Help").style.left=TheListBox.offsetWidth+5+"px"
}
function HideHelp()
{
	document.getElementById("Help").style.display="none"
}

</script>
<select onmouseover="ShowHelp(this)" onmouseout="HideHelp()">
	<option>ASDASDASDASDASDASD</option>
</select>
<div style="position:relative">
	<div id="Help" style="position:absolute;left:0px;top:-22px;display:none;border:1px solid 

#000000;background-color:yellow">
	asd
	</div>
</div>

if u notice i use a hardcoded <select> tag, u can use this method in .NET to add the onlouseover and onmouseout events:
Control.Attributes.Add("onmouseover","ShowHelp(this)")
Control.Attributes.Add("onmouseout","HideHelp()")

The <DIV> tags and <script> must be hardcoded in u aspx files.

one more thing, the tool tip can neve appear over the <select> element...

Known is handfull, Unknown is worldfull

 

[JeroenDortmans]

I did try to use the following code:

<script language=javascript>
function ShowHelp(TheListBox)
{
document.getElementById("Help1").style.display=""
document.getElementById("Help1").style.left=TheListBox.offsetWidth+5+"px"
}
function HideHelp()
{
document.getElementById("Help1").style.display="none"
}

</script>
<select onmouseover="javascript:ShowHelp(this)" onmouseout="javascript:HideHelp()">
<option>AAAAAAAAAAAAAAAAAAAAAAAAAA</option>
<option>BBBBBBBBBBBBBBBBBBBBBBBBBBBB</option>
<option>CCCCCCCCCCCCCCCCCC</option>
<option>DDDDDDDDDDDDDDDDDDDD</option>
</select>
<div style="position:relative">
<div id="Help1" style="position:absolute;left:0px;top:-22px;display:none;border:1px solid #000000;background-color:yellow">
klaasje
</div>
<div id="Help2" style="position:absolute;left:0px;top:-22px;display:none;border:1px solid #000000;background-color:yellow">
pietje
</div>

</div>

The thing is that I want to show the tooltip information when I go over an item in a listbox also when the item is not selected. The information the tooltip must show is the database information which fills the listbox (my listbox is not wide enough to show all data).
Can anybody help me with this problem?!

 

[ca8msm]

I don't think you'll find it that simple to show the tooltip on mouseover as the actual listitems themselves do not have any events that you could utilise. You could maybe use the OnFocus event of the ListBox and check the mouse co-ordinates in javascript, but I guess it would be very tricky. Try asking in the javascript forum though.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[xr280xr]

I don't think asp gives you a way to do that. I think you would need to design a custom control that allows the list items to have tool tips.

Maybe you could have a label that shows the entire contents of the selected item. So you click (instead of hover) on the item in question, and the full text appears in the label. You could probly even find a way to make it act like a tool tip using the label's visible property and style's z-index.

 

[vbkris]

>>I don't think asp gives you a way to do that. I think you would need to design a custom control that allows the list items to have tool tips.

If that cannot be done in ASP neither can it be done in .NET, why? because whatever the language it has to finally output only HTML and this particular shortcome is on the HTML side...


Known is handfull, Unknown is worldfull