• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 335
  • Last Modified:

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
0
sivakugan
Asked:
sivakugan
  • 7
  • 6
  • 2
  • +1
1 Solution
 
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
 
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 7
  • 6
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now