1 | Repositioning
|
2 | -----
|
3 |
|
4 | Tethers will be automatically repositioned when the page is resized, and when any element containing the Tether is scrolled.
|
5 | If the element moves for some other reason (e.g. with JavaScript), Tether won't know to reposition the element.
|
6 |
|
7 | #### Manually Repositioning
|
8 |
|
9 | The simplest way to reposition every Tether on the page is to call `Tether.position()`. It will efficiently reposition every
|
10 | Tether in a single repaint, making it more efficient than manually repositioning many Tethers individually.
|
11 |
|
12 | ```javascript
|
13 | Tether.position()
|
14 | ```
|
15 |
|
16 | #### Repositioning a Single Tether
|
17 |
|
18 | If you have many Tethers on screen, it may be more efficient to just reposition the tether that needs it. You can do this
|
19 | by calling the `.position` method on the Tether instance:
|
20 |
|
21 | ```javascript
|
22 | tether = new Tether({ ... })
|
23 |
|
24 | // Later:
|
25 | tether.position()
|
26 | ```
|
27 |
|
28 | #### Tethering Hidden Elements
|
29 |
|
30 | If you are creating a tether involving elements which are `display: none`, or not actually in the DOM,
|
31 | your Tether may not be able to position itself properly. One way around this is to
|
32 | ensure that a position call happens after all layouts have finished:
|
33 |
|
34 | ```javascript
|
35 | myElement.style.display = 'block'
|
36 |
|
37 | tether = new Tether({ ... })
|
38 |
|
39 | setTimeout(function(){
|
40 | tether.position();
|
41 | })
|
42 | ```
|
43 |
|
44 | In general however, you shouldn't have any trouble if both the element and the target are visible and in the DOM when you
|
45 | create the Tether. If that is not the case, create the Tether disabled (option `enabled`: `false`), and enable it when
|
46 | the elements are ready.
|