asked on

How to get the values from view-source and display when you hover over the controls?

Hi,

I have some html pages with the controls like text-box, check-box , drop-down list , combo-box and list-box etc.. In each control I have something called option-ID 2 with the name.

I want to display the option_Id when you hover over each control?, I have no idea- how to do that?.. if the control is combo-box or list-box i want to display all the values with the option_id for that control.

Please Note-One Control has only one Option-ID.

Can anyone post me some ideas, links and plugins how to do that?

My html tag for those are like below.

<td><input id="OptionId_53" position="absolute" size="3" maxlength="3" title="Something" type="text" name="OptionId_53" value="0" />

<label>Language</label></td><td><select title="Displays the current language" name="OptionId_72" id="OptionId_72"><option value="01" selected="selected">English</option>
<option value="02">Spanish</option>
<option value="03">Portuguese</option>
<option value="04">Français</option>
<option value="05">Italian</option>
<option value="06">Dutch</option>
<option value="07">Polish</option>
</select>

Thanks in Advance for your answers

Gary

http://craigsworks.com/projects/qtip/demos/

Julian Hansen

You an add a title attribute to your elements like this

<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<select name="fred" title="fred">
<option value="1">One</option>
<option value="2">Two</option>
</select>
Text box <input type="text" title="textbox" name="textbox" />
<br/>
<textarea name="memo" title="memo"></textarea>
<input type="checkbox" name="cb" title="cb" />
</body>
</html>

Open in new window

Or with script if you don't want to / can't add the title directly

<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$('input, select,textarea').each(function() {
		$(this).attr('title', $(this).attr('id'));
	});
});
</script>
<body>
<select name="fred" id="fred">
<option value="1">One</option>
<option value="2">Two</option>
</select>
Text box <input type="text" id="textbox" name="textbox" />
<br/>
<textarea name="memo" id="memo"></textarea>
<input type="checkbox" name="cb" id="cb" />
</body>
</html>

Open in new window

Tom Beck

Not sure how useful this will be to you, but here's a jsfiddle to play with:

http://jsfiddle.net/tommyBoy/npp3S/1/

sivakugan

ASKER

Hi,
Thanks all for your replies.
julianH - I cannot use my actual html pages to add an title attribute. The one i am asking for testing purpose only. so I don't want the extra code or plugin to go into the production server.

The idea i am asking should be independent from my html pages. I mean cannot put any attribute to in the current pages.

Tom Beck

You said you wanted to "display" the values. If not displayed on the page, then where?

Julian Hansen

@sivakugan please see the second code snippet I posted - it shows how to use JScript to dynamically add the title attribute at page load so you don't need to modify your html.

This is why I posted two samples.

sivakugan

ASKER

Thanks julianH, u got my point. Thanks for uploading that script. I am going to try with that.
I have one more question, In order to use that script , How do i make that as a plugin?..
I mean How to attach that script with IE. so that when ever the page loads and hover over the mouse, The option id will show up as a tooltip.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sivakugan

ASKER

@julianH, As I explained earlier, I want to run this script as a stand alone script. e.g- a plugin with the IE. I cannot attach this script with webpage. Because its only for testing purpose.
so my idea is, when the tester hover over each controls , he should be able to see the optiond-id tooltip for each controls.

Julian Hansen

As I explained earlier, I want to run this script as a stand alone script. e.g- a plugin with the IE

I am not understanding you - what do you mean by "a plugin with the IE"?

sivakugan

ASKER

I cannot attach this script with webpage. Because its only for testing purpose.
so my idea is, when the tester hover over each controls , he should be able to see the optiond-id tooltip for each controls.

Did u read this?

Julian Hansen

Yes - but I am trying to work out if you don't want this in your webpage where are you planning to put it?

Are you talking about a browser plugin i.e. separate from your page that you install to the browser that does this?

I cannot attach this script with webpage. Because its only for testing purpose.

I include test scripts all the time and I enable / disable them through a config setting in my config file. If set to TEST the scripts are included if not they are excluded.

sivakugan

ASKER

Yes, I am talking about a browser plugin i.e. separate from the page that you install to the browser.

Julian Hansen

Ok - you have posted in the Javascript forum - hence the confusion. A plugin could also mean a javascript / jquery plugin. Your original phrasing of the question did not make it clear.

Are you looking for a plugin for a specific browser or for all browsers?

sivakugan

ASKER

I am looking for the plugin to work with IE only.

Julian Hansen

Ok then I recommend you move this question to the browser categories as it is not really a javascript question.