Tether is designed to be embeddable in other libraries.
+There is one thing you should think about doing to create an embedded Tether:
+classPrefix of the tethers you create. That prefix will replace 'tether' in
+all of the classes. You can also disable classes you don't intend on using with the classes
+option.Tether has a module system which can be used to modify Tether's positioning, or just do something each time the Tether is moved.
+Tether has an array called Tether.modules, push onto it to add a module:
Tether.modules.push
+ position: ({top, left}) ->
+ top += 10
+
+ {top, left}
+Your position function can either return a new object with top and left, null/undefined to leave the coordinates unchanged, or
+false to cancel the positioning.
The position function is passed an object with the following elements:
+{
+ left, // The element's new position, from the top left corner of the page
+ top,
+ targetAttachment, // The targetAttachment, with 'auto' resolved to an actual attachment
+ targetPos, // The coordinates of the target
+ attachment, // The attachment, as passed in the option
+ elementPos, // The coordinates of the element
+ offset, // The offset, after it's converted into pixels and the manual offset is added
+ targetOffset, // The attachment is converted into an offset and is included in these values
+ manualOffset, // The manual offset, in pixels
+ manualTargetOffset
+}
+It is called with the Tether instance as its context (this).
Modules can also have an initialize function which will be called when a new tether is created. The initialize function
+is also called with the Tether instance as its context.
Tether.modules.push
+ initialize: ->
+ console.log "New Tether Created!", @
+Constraints and shift are both implemented as modules. +Mark Attachment is used by the docs.
+|
+
+
+
+
+ Tether is a low-level UI library that can be used to position any element on a page next to any other element. +It can be used for dropdown menus, tooltips, popovers, tours, help information, scroll guides, autocompletes, etc. The possibilities are + endless. +In this example we're showing an action menu tethered to a list item. + |
+
|
+
+
+
+
+ Tether works by creating an absolutely positioned element and meticulously tracking the movements of a target which you specify. +The target and element can be tethered together in a variety of different ways. +Notice how the tethered element stays tethered to its target list item even as the left pane is scrolled up + and down. + |
+
|
-
-
- Share-Help us spread the word.- - + + + |