### Start Development Server with Live Reload

Source: https://github.com/shipshapecode/tether/blob/master/CONTRIBUTING.md

Starts a development server that serves examples and enables live reloading for instant feedback on code changes. Uses Yarn to run the command.

```shell
yarn start
```

--------------------------------

### Install Windows Build Tools with Yarn

Source: https://github.com/shipshapecode/tether/blob/master/CONTRIBUTING.md

Installs the necessary build tools for Windows users via Yarn. This is a global installation required for certain build processes.

```shell
yarn global add windows-build-tools
```

--------------------------------

### Install Tether via npm

Source: https://github.com/shipshapecode/tether/blob/master/README.md

Instructions for installing the Tether JavaScript library using npm. Includes commands for the stable version and the latest beta release.

```sh
npm install tether
```

```sh
npm install tether@next
```

--------------------------------

### Install Gulp Build Tool

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

Installs the Gulp command-line interface globally, which is a build system used for automating development tasks in the Tether project. This is a prerequisite for building the project.

```bash
npm install -g gulp
```

--------------------------------

### Install Project Dependencies with Yarn

Source: https://github.com/shipshapecode/tether/blob/master/RELEASE.md

This command installs all the necessary project dependencies using the Yarn package manager. Ensure Yarn is installed and configured correctly before running this command.

```sh
yarn install
```

--------------------------------

### Install Node Modules with Yarn

Source: https://github.com/shipshapecode/tether/blob/master/CONTRIBUTING.md

Installs all project dependencies defined in the package.json file using Yarn. This command is essential after cloning the repository.

```shell
yarn
```

--------------------------------

### Install Tether Project Dependencies

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

Installs the project's dependencies locally within the Tether project directory using npm. This command should be run after navigating to the project's root directory.

```bash
# In the project directory
npm install
```

--------------------------------

### Run Acceptance Tests with Cypress Watch Mode

Source: https://github.com/shipshapecode/tether/blob/master/CONTRIBUTING.md

Builds the latest changes and starts Cypress tests in watch mode within a Chrome browser. This command facilitates continuous testing during development.

```shell
yarn test:ci:watch
```

--------------------------------

### Basic Tether Initialization (JavaScript)

Source: https://github.com/shipshapecode/tether/blob/master/README.md

Initializes a new instance of the Tether object with empty configuration. This is the most basic setup before applying specific options.

```javascript
new Tether({});
```

--------------------------------

### Example HTML Structure for Tether (HTML)

Source: https://github.com/shipshapecode/tether/blob/master/README.md

Provides a sample HTML structure with a container, an image, and a comments div, which can be used as a basis for applying Tether for positioning.

```html
<div class="container">
  <img src="awesome-picture.jpg" alt="Awesome Picture" class="picture">
  <div class="comments">
    ...
  </div>
</div>
```

--------------------------------

### Build Source Code with Yarn

Source: https://github.com/shipshapecode/tether/blob/master/CONTRIBUTING.md

Compiles and bundles the project's source code using Yarn. This command generates the output in the 'dist' directory.

```shell
yarn build
```

--------------------------------

### CSS for Scrolling Page Layout

Source: https://github.com/shipshapecode/tether/blob/master/examples/content-visible/index.html

This CSS sets up a page layout with a tall body to enable scrolling and styles a content box and an element within it. The key styles include `min-height: 1200vh` on the body for extensive scrolling, and specific dimensions and positioning for `.content-box` and `.element` to facilitate the Tether.js alignment example.

```css
.instructions { width: 100%; text-align: center; font-size: 24px; padding: 15px; background-color: rgba(210, 180, 140, 0.4); }
* { box-sizing: border-box; }
body { min-height: 1200vh; height: 100%; }
.content-box { width: 600px; border: 10px solid #999; height: 600vh; background-color: #439CCC; margin: 200vh auto; }
.element { border: 10px solid #999; background-color: #FFDC00; width: 300px; height: 200px; padding: 0 15px; font-size: 20px; font-weight: bold; }
```

--------------------------------

### Build and Watch Tether Project

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

Starts the Gulp build process for the Tether project and enables watching for file changes to automatically rebuild. This command is used during development to compile the Coffeescript into JavaScript.

```bash
gulp
```

--------------------------------

### Push Changes to Remote Fork with Git

Source: https://github.com/shipshapecode/tether/blob/master/CONTRIBUTING.md

Pushes local commits to a remote repository, typically a fork on GitHub. Assumes 'origin' is the remote name and 'master' is the branch.

```shell
git push origin master
```

--------------------------------

### Configure Tether Target Attachment

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

This example demonstrates how to change the attachment point on the 'target' element. Modifying 'targetAttachment' alters how the 'element' aligns with the specified point on the 'target'.

```javascript
new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'bottom left',
  targetAttachment: 'bottom right'
});
```

--------------------------------

### CSS: Styling for Tether Element and Random Bits

Source: https://github.com/shipshapecode/tether/blob/master/examples/viewport/index.html

This CSS defines the appearance and layout for the '.element' which is positioned by Tether, and the '.bit' elements created by the JavaScript. It includes responsive font size adjustments and box-shadow for the main element, and floating behavior for the bit elements.

```css
{ box-sizing: border-box; }
.element {
  background-color: #FFDC00;
  width: 80%;
  max-width: 300px;
  padding: 0 15px;
  font-size: 20px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

@media (max-width: 380px) {
  .element {
    font-size: 16px;
  }
}

.bit {
  width: 10vw;
  height: 10vw;
  float: left;
}
```

--------------------------------

### JavaScript: Create and Style 'bit' Elements with Random Colors

Source: https://github.com/shipshapecode/tether/blob/master/examples/viewport/index.html

This JavaScript code generates 300 'div' elements with the class 'bit' and applies random background colors from a predefined array. It ensures each color is used only once per set of 300 elements. The styles for '.bit' are defined in CSS.

```javascript
var colors = ['navy', 'blue', 'aqua', 'teal', 'olive', 'green', 'lime', 'yellow', 'orange', 'red', 'fuchsia', 'purple', 'maroon'];
var curColors = null;
for(var i=300; i--;){
  if (!curColors || !curColors.length) curColors = colors.slice(0);
  var bit = document.createElement('div');
  var index = (Math.random() * curColors.length)|0;
  bit.className = 'bit bg-' + curColors[index];
  curColors.splice(index, 1);
  document.body.appendChild(bit);
}
```

--------------------------------

### Initialize Tether Instance with CoffeeScript Module

Source: https://github.com/shipshapecode/tether/blob/master/docs/3-Advanced/2-extending_tether.md

This module adds an `initialize` function that is executed when a new Tether instance is created. It allows for custom setup or logging actions upon instantiation, with the Tether instance available as `this`.

```coffeescript
Tether.modules.push
  initialize: ->
    console.log "New Tether Created!", @

```

--------------------------------

### Tether Multiple Constraints

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

Applies multiple constraints to a Tether element, processed in order. This example uses 'scrollParent' with 'pin: true' and then 'window' with 'attachment: 'together'', with the latter taking precedence.

```javascript
new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'top left',
  targetAttachment: 'bottom left',
  constraints: [
    {
      to: 'scrollParent',
      pin: true
    },
    {
      to: 'window',
      attachment: 'together'
    }
  ]
});
```

--------------------------------

### Tether Constraint to Viewport

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

Constrains the Tether element to the viewport. This example demonstrates setting the 'to' constraint to 'window' and the attachment to 'together', ensuring the element stays with the viewport.

```javascript
new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'top left',
  targetAttachment: 'bottom left',
  constraints: [
    {
      to: 'window',
      attachment: 'together'
    }
  ]
});
```

--------------------------------

### JavaScript: Tether for Scroll Pointer

Source: https://github.com/shipshapecode/tether/blob/master/examples/element-scroll/index.html

This JavaScript code initializes a Tether instance to link a '.pointer' element to a '.scroll' element. It positions the pointer relative to the scroll handle and implements a highlight feature for paragraphs based on their visibility within the scrollable area. It requires the Tether library and operates on DOM elements.

```javascript
var pointer = document.querySelector('.pointer');
var scroll = document.querySelector('.scroll');

// This creates the pointer tether and links it up
// with the scroll handle
new Tether({
  element: pointer,
  target: scroll,
  attachment: 'middle right',
  targetAttachment: 'middle left',
  targetModifier: 'scroll-handle'
});

// Everything after this is for the highlighting effect
var paras = document.querySelectorAll('p');
for(var i=paras.length; i--;){
  var sents = paras[i].innerHTML.split('.');
  for (var j=sents.length; j--;){
    if (sents[j].trim().length)
      sents[j] = '<span>' + sents[j] + '.</span>';
  }
  paras[i].innerHTML = sents.join('');
}

var spans = document.querySelectorAll('p span');

function highlight(){
  if (!spans) return;
  var bar = pointer.getBoundingClientRect();
  for (var i=spans.length; i--;){
    var coord = spans[i].getBoundingClientRect();
    if (bar.top < coord.top && bar.bottom > coord.top){
      spans[i].classList.add('hover');
    } else if (spans[i].classList.contains('hover')) {
      spans[i].classList.remove('hover');
    }
  }
  requestAnimationFrame(highlight);
}

highlight();

document.body.addEventListener('click', function(){
  var els = document.querySelectorAll('.hover');
  for (var i=els.length; i--;)
    els[i].classList.toggle('highlight');
});
```

--------------------------------

### Configure Tether Element Attachment

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

This example shows how to modify the attachment point of the element being positioned by Tether. By changing the 'attachment' property, you can control which part of the 'element' aligns with the 'target'.

```javascript
new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'bottom left',
  targetAttachment: 'top left'
});
```

--------------------------------

### CSS: Styling for Scroll and Pointer Elements

Source: https://github.com/shipshapecode/tether/blob/master/examples/element-scroll/index.html

This CSS defines the visual appearance and behavior of the scrollable container and the pointer element. It sets fixed positioning, overflow handling, scrollbar hiding, and styles for hover and highlight effects. The styles are crucial for the Tether functionality and user interaction.

```css
body { cursor: pointer; }
.scroll { height: 80vh; width: 80vw; max-height: 600px; position: fixed; top: 5em; left: 10vw; overflow-y: scroll; padding: 4em; box-sizing: border-box; line-height: 1.2; }
.scroll::-webkit-scrollbar, .scroll::-webkit-scrollbar-track, .scroll::-webkit-scrollbar-thumb { display: none; }
.pointer { height: 3.6em; width: 77vw; border: 5px solid #CCC; border-radius: 15px; background-color: rgba(0, 0, 0, 0.05); pointer-events: none; }
.highlight { background-color: rgba(255, 255, 0, 0.3); }
.hover { background-color: rgba(0, 255, 255, 0.2);
```

--------------------------------

### Tether.js: Middle Center Alignment

Source: https://github.com/shipshapecode/tether/blob/master/examples/content-visible/index.html

This snippet initializes a Tether instance to position an element ('element') relative to a target ('content-box'). The 'middle center' attachment points and the 'visible' target modifier ensure the element stays aligned with the visible center of the target as the page scrolls. This requires the Tether.js library to be included.

```javascript
new Tether({
  element: '.element',
  target: '.content-box',
  attachment: 'middle center',
  targetAttachment: 'middle center',
  targetModifier: 'visible'
});
```

--------------------------------

### TetherJS: Position Element to Middle Center of Body

Source: https://github.com/shipshapecode/tether/blob/master/examples/viewport/index.html

This snippet initializes Tether to position an element with the class '.element' to the middle center of the document body. The 'visible' target modifier ensures the element stays within the viewport. It relies on the Tether.js library and CSS for styling.

```javascript
new Tether({
  element: '.element',
  target: document.body,
  attachment: 'middle center',
  targetAttachment: 'middle center',
  targetModifier: 'visible'
});
```

--------------------------------

### Customize Specific Tether Classes

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

This code example illustrates how to override specific Tether classes using the 'classes' option. You can map a default class name (e.g., 'element') to a new custom class name (e.g., 'my-box'). This allows for fine-grained control over the styling applied by Tether.

```javascript
new Tether({
  classes: {
    element: 'my-box'
  }
});
```

--------------------------------

### Execute Release Process with Release-It

Source: https://github.com/shipshapecode/tether/blob/master/RELEASE.md

This command initiates the automated release process using the release-it tool. It handles version bumping, changelog generation, tagging, and pushing to GitHub.

```sh
npx release-it
```

--------------------------------

### Initialize Tether with Element and Target

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

This snippet demonstrates the basic initialization of Tether. It requires two elements: 'element' (the element to be positioned) and 'target' (the element it should be attached to). The 'attachment' and 'targetAttachment' options define the positioning points between the two elements.

```javascript
new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'top right',
  targetAttachment: 'top left'
});
```

--------------------------------

### Apply Percentage Offset to Target

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

Demonstrates using percentages for `targetOffset`, where percentages relate to the target element's width and height. This allows for responsive positioning relative to the target.

```javascript
new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'top right',
  targetAttachment: 'top left',
  targetOffset: '0 75%'
});
```

--------------------------------

### Including Tether in HTML (HTML)

Source: https://github.com/shipshapecode/tether/blob/master/README.md

Shows how to include the Tether JavaScript library in an HTML page, either by referencing a local file path or using a CDN link.

```html
<script src="path/to/dist/js/tether.min.js"></script>
```

```html
<script src="https://cdn.jsdelivr.net/npm/tether@2.0.0-beta.5/dist/js/tether.min.js"></script>
```

--------------------------------

### Load Typekit JavaScript

Source: https://github.com/shipshapecode/tether/blob/master/docs/welcome/index.html

This snippet attempts to load the Typekit JavaScript library. It includes basic error handling in case the library fails to load.

```javascript
try {
  Typekit.load();
} catch(e) { }
```

--------------------------------

### Set GitHub Personal Access Token for Authentication

Source: https://github.com/shipshapecode/tether/blob/master/RELEASE.md

This command sets the GITHUB_AUTH environment variable to your GitHub personal access token, which is required by release-it for authentication with GitHub. The token must have the 'repo' scope.

```bash
export GITHUB_AUTH=abc123def456
```

--------------------------------

### Configuring Tether for Element Positioning (JavaScript)

Source: https://github.com/shipshapecode/tether/blob/master/README.md

Demonstrates how to configure Tether to position an element relative to another target element. It uses options like 'element', 'target', 'attachment', and 'targetAttachment' to define the positioning behavior.

```javascript
new Tether({
  element: '.comments',
  target: '.picture',
  attachment: 'top right',
  targetAttachment: 'top left'
});
```

--------------------------------

### Manually Reposition All Tethers with Tether.position()

Source: https://github.com/shipshapecode/tether/blob/master/docs/1-Overview/2-repositioning.md

This function repositions all Tethers on the page efficiently in a single repaint. It is the recommended approach for global repositioning.

```javascript
Tether.position()
```

--------------------------------

### Initialize Tether for Element Attachment

Source: https://github.com/shipshapecode/tether/blob/master/examples/scroll/index.html

This snippet shows how to initialize a new Tether instance. It attaches an element with the class 'pointer' to the document body, positioning it to the middle right and aligning it with the middle left of its target. The 'scroll-handle' modifier ensures the tethered element stays with the scrollable area.

```javascript
new Tether({
  element: '.pointer',
  attachment: 'middle right',
  targetAttachment: 'middle left',
  targetModifier: 'scroll-handle',
  target: document.body
});
```

--------------------------------

### Manually Reposition a Single Tether Instance

Source: https://github.com/shipshapecode/tether/blob/master/docs/1-Overview/2-repositioning.md

This method allows for repositioning a specific Tether instance. It's more efficient than a global reposition if only one Tether needs updating.

```javascript
tether = new Tether({ ... })

// Later:
tether.position()
```

--------------------------------

### Center Align Element and Target with Tether

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

This snippet illustrates how to center-align both the element and the target using Tether. It utilizes the 'middle center' attachment points for both 'attachment' and 'targetAttachment' options.

```javascript
new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'middle center',
  targetAttachment: 'middle center'
});
```

--------------------------------

### Tether Pin to Window

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

Keeps the Tether element always visible regardless of scrolling by pinning it to the window. The 'to' constraint is 'window', 'attachment' is 'together', and 'pin' is set to true.

```javascript
new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'top left',
  targetAttachment: 'bottom left',
  constraints: [
    {
      to: 'window',
      attachment: 'together',
      pin: true
    }
  ]
});
```

--------------------------------

### Tethering Hidden Elements with setTimeout

Source: https://github.com/shipshapecode/tether/blob/master/docs/1-Overview/2-repositioning.md

This snippet demonstrates a workaround for tethering elements that are initially hidden (`display: none`) or not in the DOM. It ensures a position call happens after layouts are complete by using `setTimeout`.

```javascript
myElement.style.display = 'block'

tether = new Tether({ ... })

setTimeout(function(){
  tether.position();
})
```

--------------------------------

### Apply Offset to Tether Target

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

Adjusts the position of the target element relative to its original position. The `targetOffset` property uses the same syntax as `offset` and percentages refer to the target's dimensions.

```javascript
new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'top right',
  targetAttachment: 'top left',
  offset: '0 10px',
  targetOffset: '20px 0'
});
```

--------------------------------

### Customize Tether Class Prefix

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

This code snippet shows how to customize the class prefix used by Tether. By setting the 'classPrefix' option to a new string, you can change the base name for all automatically generated Tether classes. This is useful for integrating Tether into existing projects with their own naming conventions.

```javascript
new Tether({
  classPrefix: 'bill'
});
```

--------------------------------

### Tether Optimization: Default Element Moving

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

Demonstrates the default behavior of Tether's optimizer, which aims to avoid changing CSS positioning during scrolling or resizing by analyzing past positions. This can involve moving the DOM node within its scroll parent.

```javascript
new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'top left',
  targetAttachment: 'bottom left'
});
```

--------------------------------

### Tether Positioning Function Arguments

Source: https://github.com/shipshapecode/tether/blob/master/docs/3-Advanced/2-extending_tether.md

Details the arguments passed to the `position` function within a Tether module. These include various coordinate and attachment details of the element and its target, allowing for precise control over positioning adjustments.

```javascript
{
  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
}
```

--------------------------------

### Apply Offset to Tether Element

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

Adjusts the position of the tethered element by a specified amount. The `offset` property takes a string with 'vertical-offset horizontal-offset'. Negative values move left or up, positive values move right or down. Percentages refer to the element's dimensions.

```javascript
new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'top right',
  targetAttachment: 'top left',
  offset: '0 10px'
});
```

--------------------------------

### Tether Attachment: 'together'

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

Configures Tether to change both the element's and target's attachment simultaneously. This is useful for flipping the element to the other side of the attachment. The 'to' constraint is set to 'scrollParent'.

```javascript
new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'top right',
  targetAttachment: 'bottom left',
  constraints: [
    {
      to: 'scrollParent',
      attachment: 'together'
    }
  ]
});
```

--------------------------------

### Set Twitter Share Button Related Accounts

Source: https://github.com/shipshapecode/tether/blob/master/docs/welcome/index.html

This JavaScript code dynamically sets the 'data-related' attribute for a Twitter share button. It randomly selects a set of related Twitter accounts to recommend, enhancing social sharing.

```javascript
(function() {
  var recommends, button;
  if (Math.random() >= 0.5) {
    recommends = ['hubspotdev', 'zackbloom', 'adamfschwartz'];
  } else {
    recommends = ['hubspotdev', 'adamfschwartz', 'zackbloom'];
  }
  button = document.querySelector('.twitter-share-button');
  if (button) {
    button.setAttribute('data-related', recommends.join(','));
  }
})();
```

--------------------------------

### Tether Attachment: 'together none'

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

Allows different settings for vertical and horizontal attachments. The 'to' constraint is 'scrollParent', with 'attachment' set to 'together none', indicating separate control for horizontal and vertical attachment adjustments.

```javascript
new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'top left',
  targetAttachment: 'bottom left',
  constraints: [
    {
      to: 'scrollParent',
      attachment: 'together none'
    }
  ]
});
```

--------------------------------

### Update Tether Content on Scroll

Source: https://github.com/shipshapecode/tether/blob/master/examples/scroll/index.html

This JavaScript code listens for scroll events on the document. It calculates the scroll percentage and identifies the current header element in view. The content of the '.pointer' element is then updated to display the current section title and scroll percentage. The '.show' class is toggled to manage visibility, with a timeout to hide the pointer after a period of inactivity.

```javascript
var headers = document.querySelectorAll('h1,h2,h3,h4,h5,h6');
var hideTimeout = null;
var pointer = document.querySelector('.pointer')

var getSection = function(){
  var closest, closestTop;
  for (var i=0; i < headers.length; i++){
    var rect = headers[i].getBoundingClientRect();
    if (closestTop === undefined || (rect.top < 0 && rect.top > closestTop)){
      closestTop = rect.top;
      closest = headers[i];
    }
  }
  return closest.innerHTML;
}

document.addEventListener('scroll', function(){
  var percentage = Math.floor((100 * Math.max(0, pageYOffset)) / (document.body.scrollHeight - innerHeight)) + '%'
  pointer.innerHTML = getSection() + ' - ' + percentage
  pointer.classList.add('show');
  if (hideTimeout) clearTimeout(hideTimeout);
  hideTimeout = setTimeout(function(){
    pointer.classList.remove('show');
  }, 1000);
});
```

--------------------------------

### Modify Tether Positioning with CoffeeScript Module

Source: https://github.com/shipshapecode/tether/blob/master/docs/3-Advanced/2-extending_tether.md

This module modifies the positioning of a Tether instance by adding an offset to the top coordinate. The `position` function receives an object containing positioning details and should return a modified `{top, left}` object, `null`/`undefined` to keep current position, or `false` to cancel positioning.

```coffeescript
Tether.modules.push
  position: ({top, left}) ->
    top += 10

    {top, left}
```

--------------------------------

### Constrain Tether Element to Specific Sides (Pin)

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

Allows pinning the tethered element only to specific sides (e.g., 'top') of its scrollable parent, rather than all edges. This offers more granular control over containment.

```javascript
new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'middle left',
  targetAttachment: 'middle left',
  constraints: [
    {
      to: 'scrollParent',
      pin: ['top']
    }
  ]
});
```

--------------------------------

### Disable GPU Optimizations in Tether

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

This snippet demonstrates how to disable the GPU acceleration optimization in Tether by setting the 'gpu' property within the 'optimizations' object to false. This can resolve issues with color shifts and artifacts caused by GPU layer positioning. It takes a Tether instance configuration object as input.

```javascript
new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'top left',
  optimizations: {
    gpu: false
  }
});
```

--------------------------------

### Constrain Tether Element with Pinning and Flipping Attachment

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

Combines pinning and attachment flipping to manage the tethered element's position. The element will attempt to stay within the scroll parent by adjusting its attachment and pinning to edges if necessary.

```javascript
new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'top left',
  targetAttachment: 'bottom left',
  constraints: [
    {
      to: 'scrollParent',
      attachment: 'together',
      pin: true
    }
  ]
});
```

--------------------------------

### Tether Optimization: Disable Element Moving

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

Disables the 'moveElement' optimization for Tether. This is useful if the element moving causes unwanted stylistic changes. The optimization is disabled by setting `optimizations.moveElement` to false.

```javascript
new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'top left',
  targetAttachment: 'bottom left',
  optimizations: {
    moveElement: false
  }
});
```

--------------------------------

### Constrain Tether Element to Scroll Parent (Pin)

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

Prevents the tethered element from leaving its scrollable parent. If the element attempts to go outside the parent, it will be 'pinned' to the nearest edge. `pin: true` applies pinning to all edges.

```javascript
new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'middle left',
  targetAttachment: 'middle left',
  constraints: [
    {
      to: 'scrollParent',
      pin: true
    }
  ]
});
```

--------------------------------

### Disable Specific Tether Classes

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

This code snippet demonstrates how to disable specific Tether-generated classes by setting their corresponding key in the 'classes' option to false. For instance, setting 'out-of-bounds' to false will prevent the 'tether-out-of-bounds' class from being applied. This is useful when certain class-based styling is not required.

```javascript
new Tether({
  classes: {
    'out-of-bounds': false
  }
});
```

--------------------------------

### Use Target Modifier for Scroll Handle Attachment

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

Attaches the element to the scroll handle of its scrollable ancestor. This is useful for creating elements that move with scroll bars.

```javascript
new Tether({
  element: yellowBox,
  target: scrollBox,
  attachment: 'middle right',
  targetAttachment: 'middle left',
  targetModifier: 'scroll-handle'
});
```

--------------------------------

### Use Target Modifier for Visible Attachment

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

Attaches the element to the visible part of the target element. This ensures the tethered element remains within the viewport or the visible area of its scroll container.

```javascript
new Tether({
  element: yellowBox,
  target: document.body,
  attachment: 'middle center',
  targetAttachment: 'middle center',
  targetModifier: 'visible'
});
```

```javascript
new Tether({
  element: yellowBox,
  target: scrollBox,
  attachment: 'middle center',
  targetAttachment: 'middle center',
  targetModifier: 'visible'
});
```

--------------------------------

### Constrain Tether Element by Flipping Attachment

Source: https://github.com/shipshapecode/tether/blob/master/docs/intro.md

Allows the tethered element to change its attachment point to keep more of itself within the assigned region (scroll parent). The `attachment: 'together'` option enables this behavior.

```javascript
new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'top left',
  targetAttachment: 'bottom left',
  constraints: [
    {
      to: 'scrollParent',
      attachment: 'together'
    }
  ]
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.