Is there a way how to set custom parent element on which my target element will append with Tether?
By default all tether-elements appends to body. I'm attaching my dropdown element to an input inside a modal and due to z-index issues I need this dropdown to be appended on the modal, not on the body. Does Tether have some option to do so?
A couple things to try...
First, make sure you're using the CSS that came with Tether. Just adding the CSS to my project has fixed overflow problems created by the element being placed right above the closing body tag.
Also, when Tether is working it will add classes to elements, which you can use for styling things. From their docs:
Classes
tether-element is added to the element
tether-target is added to the target
tether-enabled is added to both elements when tether is not disabled
tether-element-attached-[left,right,top,bottom,middle,center] is added to both elements based on the elements attachment, if the element becomes detached (for example, if it's pinned), that class is removed. The class reflects how the element is actually attached, so if a constraint changes the attachment, that change will be reflected in the class.
tether-target-attached-[left,right,top,bottom,middle,center] is added to both elements based on the target's attachment. All of the characteristics are the same as for element-attached.
Constraint-related Classes
tether-out-of-bounds, tether-out-of-bounds-[side] are added to both the element and the target when the element is placed outside of its constraint.
tether-pinned, tether-pinned-[side] are added to both the element and target when a constraint has pinned the element to the [side] of the container.