Member Avatar for aashishn86

hii
my drop down box contains very long names...
if i increase the length of the box it doesn't looks good
so i was wondering if i could somehow show the complete name inthe tooltip or title when the value is selected in the drop down list....

i am picking the values from the database

i read somewhere that title is not supported by w3c..

any suggestions ??
thanks........

  • 2 Contributors
  • 3 Replies
  • 100 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Airshow

Dani AI

Generated

A quick clarification and a few practical patterns that avoid changing page layout.

The title attribute is a valid HTML attribute (it is a global attribute) but native select widgets are implemented by browsers/OSes and tooltips for options are not consistently shown across platforms. That makes relying on title for long option text unreliable. As demonstrated, expanding the control on focus works technically but changes layout; that is often unacceptable on complex forms.

Two lightweight, non-invasive alternatives that work well when you cant widen the select:

  • Mirror the full label into a nearby read-only element (a small input or span) whenever the selection changes. This keeps the select compact, preserves layout, and gives keyboard users and screen readers a predictable place to find the full text.
  • If you need hover/tooltips, show a transient custom tooltip on change/hover using JS (positioned absolutely), or replace the native control with an accessible custom combobox/autocomplete so you can control presentation fully.

Example pattern (copy selected text to a read-only input):

<select id="choices">
  <option>Short</option>
  <option>Very long label that would otherwise be truncated</option>
</select>

<input id="fullLabel" type="text" readonly aria-live="polite" />
document.getElementById('choices').addEventListener('change', function () {
  var text = this.options[this.selectedIndex].text;
  var out = document.getElementById('fullLabel');
  out.value = text;
  out.title = text;
});

Accessibility note: expose the full value to assistive tech via aria-describedby or an aria-live region rather than relying solely on visual tooltips. See MDN on the title attribute and the option element for details: title attribute and option element.

Recommended Answers

All 3 Replies

Member Avatar for Airshow

Aashishn86,

You could try this approach. It works in isolation but on a real page would cause the page to reflow as it resizes. Therefore of limited utility.

<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
{}
</style>

<script>
function expand(s, b){ s.style.width = (b) ? '' : '100px'; }
</script>
</head>

<body>
<select style="width:100px;" onfocus="expand(this, 1);" onblur="expand(this, 0);">
	<option value="1">111111111111</option>
	<option value="2">222222222222222222222</option>
	<option value="3">333333333333333333333333333333</option>
</select>
</body>
</html>

Airshow

Member Avatar for aashishn86

thanks
but my form has lots of text boxes and drop downs ....
can't really play with the layout...

Member Avatar for Airshow

I guessed as much.

The problem is - if you allow enough space for it to expand into, then it might as well be full width in the first place!

Maybe someone else has a better idea.

Good luck

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.