Thoughts/Ideas

Started playing with B2 yesterday based on a need for a modal kind of thing.

Is there any way for the Modal to be more localized vs full screen? Kind of like the dropdown element functions, but with a close button, and the ability to position the modal box itself above or to the side of the trigger/toggle?

Is there an easy way to trigger either of these by adding a class or ID to a simple piece of text?

What I’m hoping for is to create a glorified Tooltip out of the elements you already have. The Dropdown works best so far, but I’d love the ability to force it to the Top vs have it Dropdown by default.

Obvs, I can do much of this with some custom mojo but I’m getting lazy or your new tools have simply raised my expectations too high.

Fantasticker tool you have provided us with!

Well done to everyone.

2 Likes

I do like the idea of this!

Nice idea.

Gotcha! We’ve got some notes together about adding options to the Dropdown letting you choose the starting edge. Right now it only appears below the toggle and will flow down and to the right. If you run out of screen space it flips to the top. Ideally, you would be able to decide if it should appear to the side of the toggle as well. So we will likely be adding options to set the primary position (above/below OR side) and from there the preferred starting flow (up/down/left/right).

Presently there isn’t a way to force it to appear above, but you can somewhat tap the side positioning in an unofficial/unsupported (could break later) way by inspecting a dropdown and adding a Custom Attribute with a name of data-x-stem-root. Here’s how you can play around with it:

  • Set the value to h and the Dropdown will position of the side of the toggle.
  • Include r in the value ( just r or combined like hr) and it will reverse the initial horizontal direction
1 Like

Thanks, Alex. I’ll play around a bit.

Sounds good, have fun!