adding value to title attribute in HTML

Question

Here I am trying to set title dynamically to the native drop-down to show tool-tip, but when I am trying to set title on hover I can't select any value from drop down options. That drop down is getting closed.

$(container).on("hover","select", function (e) {
  $(this).attr("title",$(this).val());
});

What can be the reason for this?

Answer 1

The $.on("hover") event was removed in jQuery 1.9 .

You could try this:

$(container).hover(
  function() {
    $(this).attr("title", $(this).val());
  }, function() {
    $(this).attr("title", "");
  }
);

Answer 2

Try the mouseenter event - not sure whether some other script is closing the dropdown

$('body').on("mouseenter", "select", function (e) {
    $(this).attr("title", this.value);
});

Demo: Fiddle