Title appear on hovering the input text

Question

I am trying to make an input text to have a title option, like you can make with the div's...It is possible to do this?

This is what I've tried, but it seems that it doesn't work... HTML:

<label>
   <input type="checkbox" class="promote_checkbox">Promote with</input>
   <input type="text" class="promote_points_number" maxLength="3" title="you need minimum 5 points to promote">Points</input>
</label>

And I also have another problem with this label: if you're trying to type something in the textbox you can't because the checkbox will be checked...can you please tell me why is this thing happening?

http://jsfiddle.net/2xw32q80/

The `title` attribute creates a tooltip in common browsers. If this does not happen when you test it, you need to specify the conditions more exactly so that others can reproduce the issue. Your other problem is a direct consequence of incorrect use of `label` element; you cannot use two `input` elements inside one `label`. On the other hand, you hardly need the checkbox at all. Simply let users enter a promotion code; your form data handler should just check whether the code is empty before otherwise checking it. — Jukka K. Korpela, Feb 06 '15 at 13:04

gabrielbran · Answer 1 · 2015-02-06T11:52:15.763

1

In HTML, the <input> tag has no end tag whereas in XHTML it must be properly closed, like this <input />.

The <label> tag defines a label for an <input> element, so you need to wrap each <input> with their own <label> tags like so:

<label>Label for checkbox
    <input type="checkbox" class="promote_checkbox">
</label>
<label>Label for points
    <input type="text" class="promote_points_number" maxLength="3" title="you need minimum 5 points to promote">
</label>

OR have a for attribute on each <label> that corresponds to the id attribute of its <input>

<label for="box">Label for checkbox</label>
<input type="checkbox" id="box"><br>
<label for="points">Label for points</label>
<input type="text" id="points" maxLength="3" title="you need minimum 5 points to promote">

edited Feb 06 '15 at 11:52

answered Feb 06 '15 at 11:29

gabrielbran

36
5

So, in your fiddle, the checkbox was being activated when you clicked on the text field because it was **in the same label** as the text field. – gabrielbran Feb 06 '15 at 11:33
The fact is that I need them to be in the same label – Valeriu92 Feb 06 '15 at 11:39
You need to [reconsider](http://stackoverflow.com/questions/9004307/two-input-fields-inside-one-label) your HTML structure then. – gabrielbran Feb 06 '15 at 11:43

score -1 · Answer 2 · edited Feb 06 '15 at 11:23

-1

Watch your markup, you did not close the <input> tags! This works for me in Opera:

<label>
  <input type="checkbox" class="promote_checkbox" />Promote with
  <input type="text" class="promote_points_number" maxLength="3" title="you need minimum 5 points to promote" />Points
</label>

Result:

Text edit with title

edited Feb 06 '15 at 11:23

jbutler483

24,074
9
92
145

answered Feb 06 '15 at 11:15

user1438038

5,821
6
60
94

What version are you using? Firefox [does support](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation) using the title tag as tooltip. – user1438038 Feb 06 '15 at 11:24

Title appear on hovering the input text

2 Answers2