Code Monkey home page Code Monkey logo

Comments (10)

maxfierke avatar maxfierke commented on May 24, 2024 1

@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
  }
}

from ember-tooltips.

maxfierke avatar maxfierke commented on May 24, 2024

@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)?

from ember-tooltips.

KhanhTranJBI avatar KhanhTranJBI commented on May 24, 2024

@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;
  }
}```

from ember-tooltips.

KhanhTranJBI avatar KhanhTranJBI commented on May 24, 2024

Here is if I do not override tooltip width CSS
ember-tooltip-off-side-without-custom-css

from ember-tooltips.

maxfierke avatar maxfierke commented on May 24, 2024

@KhanhTranJBI is there any absolute or relative positioning on any of the parent elements?

from ember-tooltips.

KhanhTranJBI avatar KhanhTranJBI commented on May 24, 2024

@maxfierke yes, its parent elements has relative position as well as absolute position

Relative position on parent element
Screen Shot 2019-10-16 at 1 02 23 PM

Absolute position on other parent element
Screen Shot 2019-10-16 at 1 03 28 PM

from ember-tooltips.

maxfierke avatar maxfierke commented on May 24, 2024

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.

from ember-tooltips.

KhanhTranJBI avatar KhanhTranJBI commented on May 24, 2024

@maxfierke It looks better, but the tooltip is still out of the browser window. Please check!
ember-tooltip-off-side-after-add-proper

from ember-tooltips.

KhanhTranJBI avatar KhanhTranJBI commented on May 24, 2024

@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!

from ember-tooltips.

sotoyjuan avatar sotoyjuan commented on May 24, 2024

@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
  }
}

This solved the problem for me.
Thanks!

from ember-tooltips.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.