Asp.Net Dropdownlist tooltip or title with JS

Question

I’m starting in Javascript, and would like my DropDownList of a control .ascx, when selecting an item, display its full value when you hover over it, as if it were a tooltip or title. This is my Dropdown:

<asp:DropDownList CssClass="dropdown" ID="ddlDescricao 
 OnSelectedIndexChanged="ddlDescricao_SelectedIndexChanged"
                        runat="server" TabIndex="0">   

I tried to do it that way:

    <script type="text/javascript">
    function addToolTip() {
        var ddl = document.getElementById('<%= ddlDescricao.ClientID %>');
        for (var i = 0; i < ddl.options.length; i++) {
            ddl.options[i].title = ddl.options[i].text;
        }
    }
</script>

But it’s not working.

I’m using jQuery 1.7

From Now Thank You All.

--Edit 11/02/2016 08:27

I’m calling the function from the dropdown onmouseover.

Answer 1

Just use the following instruction:

$("select[name*='ddlDescricao']")
    .prop('title', $("select[name*='ddlDescricao'] option:selected").text());

The selector was made using the contains attribute because the controls name is usually modified in the rendering.

Update: Adding the code of the second objection

var $dropdown = $("select[name*='ddlDescricao']");
$dropdown.prop('title', $dropdown.attr('title') + ': ' + $dropdown.children("option:selected").text());

Answer 2

I don’t know if I understand the problem very well, but if you need to change the title of an element using javascript you can do it this way:

<script>
   function alteraTitulo() {
      var ddl = document.getElementById('ddlTeste');
      var title = ddl.options[ddl.selectedIndex].text;
       ddl.title = title;
    }
 </script>

<select id="ddlTeste" onchange='alteraTitulo()'>
<option>Valor 1</option>
<option>Valor 2</option>
<option>Valor 3</option>
</select>

In this way I select the element in question in var ddl = document.getElementById('ddlTeste');, get the text of the selected option var title = ddl.options[ddl.selectedIndex].text; and change the title ddl.title = title;.

Jsfiddle

Editing

A simple solution (using javascript only) for several selects would you pass the element id to your function. It would be more or less that:

<script>
   function alteraTitulo(id) {
      var ddl = document.getElementById(id);
      var title = ddl.options[ddl.selectedIndex].text;
       ddl.title = title;
    }
 </script>

<select id="ddlTeste" onchange='alteraTitulo("ddlTeste")'>
<option>Valor 1</option>
<option>Valor 2</option>
<option>Valor 3</option>
</select>

<select id="ddlTeste1" onchange='alteraTitulo("ddlTeste1")'>
<option>Teste 1</option>
<option>Teste 2</option>
<option>Teste 3</option>
</select>

Jsfiddle

Using jQuery you can perform the exchange when running the event .change(), thus making the title replacement. It would look like your code:

$('select').change(function(){
var ddl = $(this);
var title = ddl.find("option:selected").text();
ddl.prop('title', title); 
console.log(title);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<select>
<option>Valor 1</option>
<option>Valor 2</option>
<option>Valor 3</option>
</select>

<select>
<option>Teste 1</option>
<option>Teste 2</option>
<option>Teste 3</option>
</select>

Jsfiddle