Opened 3 years ago

Closed 3 years ago

#15186 closed bug (notabug)

Tooltip removes my <input name="title">

Reported by: JorisDebonnet Owned by: JorisDebonnet
Priority: minor Milestone: none
Component: ui.tooltip Version: 1.12.1
Keywords: Cc:
Blocked by: Blocking:

Description (last modified by JorisDebonnet)

JQuery UI Tooltip triggers on my <form> element. It does not even have a title attribute though, but it does have a name=title input, also accessible via element.title. So as Tooltip does its magic, at some point it empties/removes element.title, which removes my <input> element, never to be returned...

I actually migrated my whole application from a jQuery with .live and jQuery UI 1.10.4, to the most recent versions, to try and get rid of the problem (of course it was worth it anyway), but the issue is still there.

Change History (5)

comment:1 Changed 3 years ago by JorisDebonnet

Description: modified (diff)

comment:2 Changed 3 years ago by JorisDebonnet

I actually solved it now by adding "[title]" to the .tooltip({items}) selector, which I had assumed it filtered for internally. But I guess the issue should still be fixed for people that don't think of this.

comment:3 Changed 3 years ago by Scott González

Owner: set to JorisDebonnet
Status: newpending

I'm not sure what configuration you're using to make this happen as I cannot reproduce this with anything I can think of. Please provide a reduced test case so we can debug this issue.

comment:4 Changed 3 years ago by JorisDebonnet

Status: pendingnew

Well, it's probably because of some bad jQuery code. I used to have my own written tooltip code, and when I moved to the jQuery UI Tooltip plugin, I needed to disable it on <option> tags because it doesn't work well there (the tooltip appears behind the dropdown). So I used some custom code I found somewhere to disable it for option elements.

Turns out this code contained content: function () {return $(this).prop('title');}, and that is most of the problem. For forms, apparently this selects input elements with that name, too. I can fix it by changing prop to attr, or even removing that part altogether (not sure why it was even there, because the title attribute is the default). Then it no longer removes the form's title-input.

Anyhow, here is my reduced jsfiddle, where you can still see the issue happening: https://jsfiddle.net/xyh6mysr/

  • items: ':not(option)' enables the plugin even on elements that don't have a title attribute, such as the form element.
  • $(this).prop('title') apparently also works to select a form element's "title" input. Not sure that's intended, but in any case, that's a jQuery thing.

I guess that might make this bug invalid, but maybe (for jQuery) it's worth looking into why prop('title') even works this way for forms?

On the other hand, one might wonder why jQuery UI or jQuery is removing that input in any case, instead of just "emptying the attribute".

comment:5 Changed 3 years ago by Scott González

Resolution: notabug
Status: newclosed

Use .attr("title") not .prop("title").

Note: See TracTickets for help on using tickets.