Tether Events or Groups

[MalucoMarinero]

G'day there,

We're working on a web app that makes pretty extensive use of Tether, and we're grappling with the best way to handle connectors, the little triangle thing that points to the target the tether attaches to. Things like shepherd use css to do it, we wanted to avoid it so the arrows would be more flexible in positioning around the edges of the screen, rather than strictly being centre or corner aligned. To that end we tether two elements, the main dialog and then a small connector element.

You can see this if you visit https://listium.com/@thomasdavis/3067/netflix-top-200-dramas and mouse over the items in the 'Plot' or 'Poster' column on this page. This largely works well, however we have issues when it comes to constraints.

Tether has no concept of groups or events, so there's really no way for us to have them flip on the constraint as a group.

An example way we could use this here is for the main box to emit an event when it flips on the constraint, and then use that event to update the options on the connector.

I'm posting this as an issue mainly because while we'd be happy to contribute code to achieve this goal, I think there's a bunch of ways that we could approach it, better to contribute something that isn't overly specific to our own use case.

What do you think?

[TrevorBurnham]

Have you tried using tether.on('update', callback)? It should fire any time the Tether instance runs into a constraint, allowing you to respond e.g. by flipping the arrow.

[MalucoMarinero]

Oh really? No, .on wasn't listed as a method in the docs so didn't even know it had a standard event emitter. I guess I'll try that then.

[aight8]

Can the events documented? I searched for it too

[RobbieTheWagner]

I just opened a PR to add documentation for the events. This should help for now, until we get around to redoing all the docs.