Tooltip can't find elements with Invalid Selectors as IDs

[explorigin]

Describe the Bug

Tooltip fails whenever the target id makes an invalid CSS selector.

Steps to Reproduce

Steps to reproduce the behavior:

1. Create a trigger element like so:

<span data-tooltip="2d90208e58f24216be64de517570c628">Hello</span>
<hx-tooltip id="2d90208e58f24216be64de517570c628">Do you like my hat?</hx-tooltip>

2. Hover over Hello with your mouse.
3. Observe error (screenshotted below) in the dev console.

Expected behavior

I expected it to ask me about my hat.

Screenshots

Environment

Please complete the following information:

• Device: Lappy
• OS: OSX
• Browser: Chrome 68

Additional Context

Problem is here. Make it look like:

this._target = this.getRootNode().querySelector('[data-tooltip="' + this.id + '"]');

Proof that the fix works:

[CITguy]

Is the ID being generated by a library or by your own business logic?

The logic in the assignment of this._target works for valid IDs. If an invalid ID is being generated, we can't do much about it in HelixUI.

[explorigin]

This is about removing warts from Helix. Yes, you can always prepend a letter to make it valid, but who wants to have to do that (or figure out that you have to)? A library should just work...and the fix to accommodate it is dead simple.

[explorigin]

Technically the id is valid HTML but it makes for an invalid CSS selector...hence the need for quotes.

[CITguy]

I apologize.

I confused the snippet above for this._target = ... as current code when you were actually providing corrected code.

Thank you for reporting this bug.

We'll get it fixed!

---

Additional Information

Demo of Bug: https://codepen.io/CITguy/pen/GBYWYb

W3C spec allows alphanumeric ID values (including _, -, and .), so the mentioned ID (2d90208e58f24216be64de517570c628) is a valid HTML5 value.

[CITguy]

@explorigin: now fixed in helix-ui@0.12.1