Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support setting the tooltip text as an attribute #84

Open
ergo opened this issue Aug 23, 2016 · 7 comments
Open

Support setting the tooltip text as an attribute #84

ergo opened this issue Aug 23, 2016 · 7 comments

Comments

@ergo
Copy link

ergo commented Aug 23, 2016

Hello,

Would it be possible to use paper tooltip similar way to the paper-toast?
I would love to be able to use it like:

<paper-tooltip text="I'm a tooltip!">

Or even read the title property of the element the tooltip attaches to programmaticly.
@notwaldorf
Copy link
Contributor

You can use bindings without having the tooltip as an attribute: http://jsbin.com/woqoleh/edit?html,output

Does that work for you?

@notwaldorf
Copy link
Contributor

notwaldorf commented Aug 23, 2016 •
edited
Loading

I do agree that as a feature request using the target's title would be nice. Would you be interested in sending a PR for that?

@ergo
Copy link
Author

ergo commented Aug 24, 2016

@notwaldorf I looked at your jsbin, thing is i want to avoid light dom (FUOC) showing up before elements are loaded if possible. I'm trying to use polymer on a non SPA application so I cant use unresolved on body globally.

@ergo
Copy link
Author

ergo commented Aug 24, 2016 •
edited
Loading

@notwaldorf I could try to submit a PR for new functionality, but i think that best option to implement that for pages that have 100 tooltips or more would be to have something like is="tooltip-provider". I'm not even sure if that kind of approach is possible. It would require one global tooltip object and repositioning - so implementation is probably non-trivial.

@notwaldorf
Copy link
Contributor

@ergo have you tried adding <body unresolved>, to stop the FOUC?

@ergo
Copy link
Author

ergo commented Aug 24, 2016

@notwaldorf Yes, but I'm adding elements to a non-SPA application, so hiding whole body and showing it via unresolved end with one big flash of rendered html.

If I could use unresolved on individual elements then it would solve my issue (same as ng-cloak directive works in angular). But seems this strategy is not supported by polymer 1.6 as of now.

@ergo
Copy link
Author

ergo commented Aug 25, 2016 •
edited
Loading

@notwaldorf I was also thinking that maybe for web application another option (or another element) that would behave like paper-toast would make sense - that allows you to place a single top level tooltip element, and using events just show it on hover when required. This would also solve the problem of compoment encapsulation right? So event could do something like:

tooltipElem.text = 'foo'
tooltipElem.for = event.target

So the tooltip would work and position on both light and shadow dom using delegated events?
(every element would have to add their own delegated listener obviously).
Maybe that strategy would even work with current paper-tooltip with some clever delegates and event handlers that would update the values dynamically.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ergo @notwaldorf