Newly appended select options not displaying title attribute

Question

I'm currently using ajax to append new options to a multiple select box, but even though I'm trying to add title attributes to them, they don't seem to be displaying at all. Is there something that I'm missing?

enter image description here

This is done in Coffeescript:

$.ajax(
        type: 'get'
        url: '/Filter/LookupClassification'
        data: ( term: inputVal )
        dataType: 'json'
        success: (response)->
            select = document.getElementById('getClassBox')
            select.options.length = 0

            $.each(response, (key, value)->
                option = $(
                    '<option/>'
                    'title': value.toUpperCase()
                    'value': key
                ).text(key + ' - ' + value.toUpperCase())

                $('#getClassBox').append(option)
            )

            $('#selectClassBox option').each((index, value)->
                val1 = $(value).val()
                if $('#getClassBox option').val() is val1
                    $('#getClassBox option[value=' + val1 + ']').remove()
            )
    )

Since when has the `title` attribute been valid for `option`s, and how could it possibly be useful? — Grant Thomas, Apr 25 '13 at 14:58
@GrantThomas I'm trying to use it for tooltips on mouseover, like this: http://jsfiddle.net/spB3E/ — SCS, Apr 25 '13 at 15:02
It shows up on hover for Chrome 26, IE 10, and Firefox 20.0.1, unless I'm somehow seeing things other people aren't. — SCS, Apr 25 '13 at 15:08
@GrantThomas - Since at least [HTML 4](http://www.w3.org/TR/html401/interact/forms.html#adef-label-OPTGROUP). — Álvaro González, Apr 25 '13 at 15:08
@ÁlvaroG.Vicario it's interesting that the HTML5 spec doesn't mention "title". — Pointy, Apr 25 '13 at 15:09
@ÁlvaroG.Vicario ah OK well now I feel silly for completely mis-reading that :-) — Pointy, Apr 25 '13 at 19:11

Pointy · Answer 1 · 2013-04-25T15:05:47.860

1

The <option> element can't have a "title" attribute. See the spec.

edit — by that I mean that while it's fine to add a "title" attribute if you want to, the browser won't pay attention to it like it would to a "title" attribute on a <div> or <button> element.

edit again — also you should probably ignore this since, though it's not in the HTML5 spec, the "title" attribute on <option> elements is apparently supported in some browsers.

edited Apr 25 '13 at 15:05

answered Apr 25 '13 at 15:00

Pointy

405,095
59
585
614

They *can* (works in some browsers), but *shouldn't*, said by the spec you provided – Ian Apr 25 '13 at 15:04
@Ian yes that's true; I'll elaborate. – Pointy Apr 25 '13 at 15:05
I knew what you meant, but for others' reference :) – Ian Apr 25 '13 at 15:05
1

And whoa turns out some browsers will do it! Who knew? (Well @Baadshah obviously :-) – Pointy Apr 25 '13 at 15:06
Even @Baadhsha also not tested in all browsers mentioned there.I am sure.I saw him while testing in IE9 :P – Suresh Atta Apr 25 '13 at 15:15
@Pointy would you happen to know of a good tooltip solution for option values that extend far past the width of the parent select box? A few SO solutions said to use the title attribute, but if it's not reliable, is there a more natural go-to solution? – SCS Apr 25 '13 at 15:19
@SCS well I've never really thought about trying to use tooltips for ` – Pointy Apr 25 '13 at 15:33

score 0 · Answer 2 · answered Apr 25 '13 at 15:03

0

You could simply write this to add options to your dropdown:

select.options[select.options.length] = new Option(key + ' - ' + value.toUpperCase(), key);

Don't bother about title attributes.

answered Apr 25 '13 at 15:03

Ja͢ck

170,779
38
263
309

Would you happen to know what might be my best bet for displaying option values that extend far past the width of the select box? I'm trying to go for the simplest tooltip solution, but it seems using title attributes is not the best idea. – SCS Apr 25 '13 at 15:14

Newly appended select options not displaying title attribute

2 Answers2