PHPLOVER PHPLOVER - 3 years ago 174
Javascript Question

Tooltip only working on one text field

I have the below code which I got from another website. The problem I am having is it is only displaying onclick of the first text field. All other textfields it does not work.

I have not bothered posting the CSS as not needed to fix I believe.

Basically to display a text field I have to place the below code right underneath each textfield

<span class="hint">This is a hint">&nbsp;</span></span>


Here is the JavaScript:

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}

function prepareInputsForHints() {
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){
// test to see if the hint span exists first
if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
// the span exists! on focus, show the hint
inputs[i].onfocus = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
}
// when the cursor moves away from the field, hide the hint
inputs[i].onblur = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "none";
}
}
}
// repeat the same tests as above for selects
var selects = document.getElementsByTagName("select");
for (var k=0; k<selects.length; k++){
if (selects[k].parentNode.getElementsByTagName("span")[0]) {
selects[k].onfocus = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
}
selects[k].onblur = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "none";
}
}
}
}
addLoadEvent(prepareInputsForHints);


I like the tooltip as it's exactly what I wanted as it shows a
<
(sideways triangle) so it points to the textbox that is selected.

I was thinking of maybe using jQuery but as I don't have knowledge of JS/jQuery not sure how I would make it so it uses the CSS I currently have for the tooltip.

Answer Source

Depends on your HTML markup. Each span/input pair must be in its own container.

Example: http://jsfiddle.net/E7ZME/

<div><input><span class="hint">This is a hint"&nbsp;</span></div>
<div><input><span class="hint">This is a hint"&nbsp;</span></div>
<div><input><span class="hint">This is a hint"&nbsp;</span></div>

I didn't change any of the javascript you posted. I only used this HTML, and a little CSS.

EDIT:

If you're going to use jQuery, check out some of the tooltip plugins.

Here's a list of 30 of them:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download