Ember Tooltip v3.4.0 shows a tooltip outside the browser window
KhanhTranJBI opened this issue · comments
Issue: I found is the tooltip shown and expand the browser window width and part of the tooltip content is hidden.
Expected: I hope the tooltip will shown and does not expand the browser window width and the tooltip content is not hidden.
Thanks!
@KhanhTranJBI it looks like you may be using custom CSS to style the tooltips. Could you share that along with the context of how you're using the tooltip (e.g. a snippet of the handlebars template)?
@maxfierke yes, I am using a custom CSS. If I do not override CSS for tooltip then the tooltip width is around 50px which is too small and part of the tooltip is out of browser window screen.
Here is a component
<EmberTooltip
@onShow={{action "setContent"}}
@updateFor={{this.content}}
@side={{side}}
>
{{#if this.content}}
{{this.content}}
{{else}}
<div class="loading-spinner"></div>
{{/if}}
</EmberTooltip>```
Here is a custom CSS
```.ember-tooltip {
min-width: 200px;
max-width: 316px;
background-color: white;
color: black;
border: 1px solid green;
text-shadow: none;
.tooltip-inner {
border: none;
background-color: white;
color: black;
}
.loading-spinner {
@include loading-spinner();
min-height: 10;
min-width: 50;
}
}```
Here is if I do not override tooltip width CSS
@KhanhTranJBI is there any absolute or relative positioning on any of the parent elements?
@maxfierke yes, its parent elements has relative position as well as absolute position
Relative position on parent element
Absolute position on other parent element
Ahh, that may be what's causing issues with popper.js's auto-placement. You may have luck passing @popperContainer="body" with your <EmberTooltip>, as that will position the tooltip relative to the <body> element.
@maxfierke It looks better, but the tooltip is still out of the browser window. Please check!
@KhanhTranJBI I played around with this a bit, and this can be resolved by disabling a setting in popper.js that ember-tooltips enables by default, called escapeWithReference (more info here in the README.md)
e.g.
<EmberTooltip @popperOptions={{popperOptions}}>
...
</EmberTooltip>
where popperOptions is defined on the component as something like:
{
preventOverflow: {
escapeWithReference: false
}
}@maxfierke It is the same. My coworker suggested me to use @side="bottom-end" which is good enough to solve the issue I have. Thank you so much @maxfierke!
@KhanhTranJBI I played around with this a bit, and this can be resolved by disabling a setting in popper.js that ember-tooltips enables by default, called
escapeWithReference(more info here in the README.md)e.g.
<EmberTooltip @popperOptions={{popperOptions}}> ... </EmberTooltip>where
popperOptionsis defined on the component as something like:{ preventOverflow: { escapeWithReference: false } }
This solved the problem for me.
Thanks!