Skip to main content

Search and Top Navigation

#15186 closed bug (notabug)

Opened May 03, 2017 02:22AM UTC

Closed May 03, 2017 01:30PM UTC

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

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.

Attachments (0)
Change History (5)

Changed May 03, 2017 02:50AM UTC by JorisDebonnet comment:1

description: JQuery UI Tooltip triggers on my <form> element (for some reason). 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. \ \ Unfortunately I am not sure why it triggers on the form element anyway. Perhaps something about the event bubbling up from an element with a title attribute inside the form or something. I'll solve it for now by renaming that input field, but this should probably be fixed... it caused an unhappy client for me as back-end things stopped working too, of course :)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.

Changed May 03, 2017 02:51AM UTC by JorisDebonnet comment:2

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.

Changed May 03, 2017 12:48PM UTC by scottgonzalez comment:3

owner: → 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.

Changed May 03, 2017 01:25PM UTC by JorisDebonnet comment:4

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".

Changed May 03, 2017 01:30PM UTC by scottgonzalez comment:5

resolution: → notabug
status: newclosed

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