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&#231;ais</option>
<option value="05">Italian</option>
<option value="06">Dutch</option>
<option value="07">Polish</option>
</select>

Thanks in Advance for your answers
sivakuganAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
Just add the script below to the <head> of the document (or in the document if the latter is not possible)
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>

Open in new window

0
 
Julian HansenCommented:
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

0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

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

http://jsfiddle.net/tommyBoy/npp3S/1/
0
 
sivakuganAuthor Commented:
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.
0
 
Tom BeckCommented:
You said you wanted to "display" the values. If not displayed on the page, then where?
0
 
Julian HansenCommented:
@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.
0
 
sivakuganAuthor Commented:
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.
0
 
sivakuganAuthor Commented:
@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.
0
 
Julian HansenCommented:
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"?
0
 
sivakuganAuthor Commented:
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?
0
 
Julian HansenCommented:
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.
0
 
sivakuganAuthor Commented:
Yes,  I am talking about a browser plugin i.e. separate from the page that you install to the browser.
0
 
Julian HansenCommented:
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?
0
 
sivakuganAuthor Commented:
I am looking for the plugin to work with IE only.
0
 
Julian HansenCommented:
Ok then I recommend you move this question to the browser categories as it is not really a javascript question.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.