4 ms·

I wonder what the difference is with Tether

by yuribit 11y ago

FezVrasta 11y ago
Hi! Popper.js dev here. There are several advantages: - The size is half of Tether (3.5 vs 7); - Popper.js doesn't need any additional CSS in your page; - It works even with elements not placed as direct children of body; - It's much much faster (compare both on mobile, you'll see Tether lagging a lot!); - It automatically detects the size of the tooltip arrow; - Inside Popper.js you already have a way to create tooltip elements automatically, with Tether you need an additional library; - Popper.js supports particular "flip" behaviors, you can decide that if there's not space on the left, the tooltip must move on the bottom (for example); - The whole code is fully documented with JSDoc! I hope this answers your question
- yuribit 11y ago
  Awesome!
- mountaineer22 11y ago
  What minimum browsers does this support? I glanced through the documentation, but did not notice it. Awesome work, by the way.
  - FezVrasta 11y ago
    I've tested it on Chrome, Firefox, Edge, Safari, Safari Mobile and Chrome Mobile (latest versions) but I suspect it works on older versions as well.
  - chipperyman573 11y ago
    Tested it in browserstack, works in IE10+. IE9 is close but doesn't work when the browser is small. IE8 doesn't work at all (go figure)
- andrewingram 11y ago
  I've actually been looking for something that goes the other way. The main issue i've had with Tether and React is that Tether does too much. I don't want a lib that manipulates the DOM itself, I want a overlay positioning engine that I can use to position an element (much like Popper and Tether), but that leaves the positioning up to me (ie let React keep full control of the DOM). Obviously i'd need to subscribe to position updates too, for scroll and resize (and any other) events. I tried to do this using Tether as a starting point, but it was a painful experience trying to to untangle its code. When I talk about engines, I mean things like Zynga's Scroller (https://github.com/zynga/scroller https://github.com/zynga/scroller), essentially a purely logical set of functionality that doesn't assume a particular view-level implementation.
  - FezVrasta 11y ago
    This is exactly the direction I want to take with Popper.js!! The part that sets the style to the DOM will soon be moved to a modifier/plugin so that it can be disabled and replaced with a modifier which just exports the coordinates.
    - andrewingram 11y ago
      That sounds promising. So conceptually you'd end up with something like popper-engine and popper?
      - FezVrasta 10y ago
        Yup something similar
  - huula 10y ago
    Totally understand your pain. Did you try https://huu.la https://huu.la? It never messes up with the user's page DOMs and you don't even need to write code to use it.
    - FezVrasta 10y ago

I wonder what the difference is with Tether

by yuribit 11y ago

I wonder what the difference is with Tether

Hi! Popper.js dev here. There are several advantages: - The size is half of Tether (3.5 vs 7); - Popper.js doesn't need any additional CSS in your page; - It works even with elements not placed as direct children of body; - It's much much faster (compare both on mobile, you'll see Tether lagging a lot!); - It automatically detects the size of the tooltip arrow; - Inside Popper.js you already have a way to create tooltip elements automatically, with Tether you need an additional library; - Popper.js supports particular "flip" behaviors, you can decide that if there's not space on the left, the tooltip must move on the bottom (for example); - The whole code is fully documented with JSDoc! I hope this answers your question

yuribit 11y ago
Awesome!
mountaineer22 11y ago
What minimum browsers does this support? I glanced through the documentation, but did not notice it. Awesome work, by the way.
- FezVrasta 11y ago
  I've tested it on Chrome, Firefox, Edge, Safari, Safari Mobile and Chrome Mobile (latest versions) but I suspect it works on older versions as well.
- chipperyman573 11y ago
  Tested it in browserstack, works in IE10+. IE9 is close but doesn't work when the browser is small. IE8 doesn't work at all (go figure)
andrewingram 11y ago
I've actually been looking for something that goes the other way. The main issue i've had with Tether and React is that Tether does too much. I don't want a lib that manipulates the DOM itself, I want a overlay positioning engine that I can use to position an element (much like Popper and Tether), but that leaves the positioning up to me (ie let React keep full control of the DOM). Obviously i'd need to subscribe to position updates too, for scroll and resize (and any other) events. I tried to do this using Tether as a starting point, but it was a painful experience trying to to untangle its code. When I talk about engines, I mean things like Zynga's Scroller (https://github.com/zynga/scroller https://github.com/zynga/scroller), essentially a purely logical set of functionality that doesn't assume a particular view-level implementation.
- FezVrasta 11y ago
  This is exactly the direction I want to take with Popper.js!! The part that sets the style to the DOM will soon be moved to a modifier/plugin so that it can be disabled and replaced with a modifier which just exports the coordinates.
  - andrewingram 11y ago
    That sounds promising. So conceptually you'd end up with something like popper-engine and popper?
    - FezVrasta 10y ago
      Yup something similar
- huula 10y ago
  Totally understand your pain. Did you try https://huu.la https://huu.la? It never messes up with the user's page DOMs and you don't even need to write code to use it.
  - FezVrasta 10y ago