-
Notifications
You must be signed in to change notification settings - Fork 45
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.
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
Should we support explicit targets? Should we allow selector strings to be passed in for the target? #109
Comments
Hey @thiberaw, I have concerns about specifying the target instead of finding it automatically:
I haven't had a chance to reach out to the community about this yet, so I've left the current stop-gap that you found: for now you can pass in a DOM element as the target. I'd like to come to a consensus on how we should handle explicit targets (assuming we should handle them at all!) @thiberaw and others, anyone have thoughts on explicit targets?
|
@kybishop as an extension of this, is there a path currently available (or planned) that would allow a tooltip to target arbitrary coordinates on the page, instead of a specific DOM element? An example use case for this (which I currently have), is showing tooltips for objects within a |
I found it useful to be able to provide an explicit target when using the tooltip as a contextual component for my own components. I added it like this in my own component: {{yield (hash popover=(component 'attach-tooltip' popperTarget=element)) }} And I was then able to have contextual tooltips for my components like this: {{#my-component as |task|}}
Something that I wish to yield in my component
{{#task.popover}}
Here be popover
{{/task.popover}}
{{/my-component}} |
@billdami I think you could create a dummy <div id="myDiv" style="position:fixed; left: {{position.x}}; top: {{position.y}}"></div> And then create an attacher with |
@thiberaw, agreed, I see the ability to provide an explicit target as essential for the kind of scenario I demonstrated earlier (yielding a contextual popover component) and it would be sad to loose this possibility. I don't think providing the element directly, as in my example, is a workaround. It is my belief that it is how @kybishop, I believe there is an actual need for explicit targets. Whether this is done by selector or by passing the element doesn't matter that much to me personally. With regards to destruction it would be good if it can be handled automatically, less possibility of doing something wrong for the developer. |
In attach-popover.js file there's a
_initializeAttacher
method triggered on insert and by an observer on 'hideOn', 'showOn', 'popperTarget' properties.In the hbs file where the attach-popover is declared if you pass a "#myId" string to the popperTarget attribute, then in the
_initializeAttacher
this property is set like this:this._currentTarget = this.get('popperTarget')
but because the popperTarget is a string, then the _currentTarget is no longer a DOM element, so when we run the:
this._currentTarget.addEventListener(event, this._showAfterDelay)
an error is raised because
this._currentTarget
has noaddEventListener
( of course, it is just a string :)I came to some workaround and passed a DOM element to the popperTarget in the hbs file, but I think it would be better to do as in your ember-popper add-on and check if the
this.get('popperTarget')
is an instance of Element (cf. the_getPopperTarget
method in the ember-popper-base.js file)If you want, and think it worths it, I would be pleased to send you a pull request for this issue.
The text was updated successfully, but these errors were encountered: