---
layout: default
title:  "Drop / Select / Tether"
---

Drop / Select / Tether
======


[Drop](https://github.com/HubSpot/drop) is a Javascript and CSS library for creating dropdowns and other popups attached to elements on the page. [Select.js](https://github.com/HubSpot/select) is a Javascript and CSS library for creating styleable select elements. Both use [Tether.js](https://github.com/HubSpot/tether) to efficiently position elements.

## 1: Basic Example with Drop

<p><button class='btn drop-example-1'>Hello, Click Me</button></p>

~~~js
  drop1 = new Drop({
    target: document.querySelector('.drop-example-1'),
    content: 'Welcome to the whatever',
    position: 'bottom center',
    classes: 'drop-theme-arrows-bounce-dark',
    openOn: 'click'
  });
~~~

<script>
$(function () {
  var drop1;
  drop1 = new Drop({
    target: document.querySelector('.drop-example-1'),
    content: 'Welcome to the whatever',
    position: 'bottom center',
    classes: 'drop-theme-arrows-bounce-dark',
    openOn: 'click'
  });

})
</script>


## 2: Dropdown-like Example with Drop
<style>
.drop-theme-arrows-bounce ul {
  margin: 0; padding: 0;
}
.drop-theme-arrows-bounce ul li {
list-style: none;
padding: 5px;
border-bottom: 1px solid lightgray;
}
.drop-theme-arrows-bounce ul li:hover {
background-color: lightgray;
cursor: pointer;
}
</style>
<p><button class='btn drop-example-2'>Hello, Hover Over Me <i class="icon-caret-down"></i></button></p>
<div class='drop-content-example' style='display:none;'>
<ul>
<li>Example Something</li>
<li>Something <a href='#' class='btn info'>Else <i class="icon-legal"></i></a></li>
<li><img alt="" src="data:image/png;base64,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" /> An Image!</li>
</ul>
</div>


~~~js
  drop2 = new Drop({
    target: $('.drop-example-2')[0],
    content:  $('.drop-content-example').html(),
    position: 'bottom center',
    classes: 'drop-theme-arrows-bounce',
    openOn: 'hover'
  });
~~~

<script>
$(function () {
  var drop2;
  drop2 = new Drop({
    target: $('.drop-example-2')[0],
    content:  $('.drop-content-example').html(),
    position: 'bottom center',
    classes: 'drop-theme-arrows-bounce',
    openOn: 'hover'
  });

})
</script>



## 3: Basic Select Example

<p>
<select id='select-example'>
<option value="" selected="selected">Select a format</option>
<option value="MD">Markdown</option>
<option value="HTML">Htmlbook</option>
<option value="AZ">Arizona</option>  <!-- I'm hilarious -->
<option value="ASC">Asciidoc</option>
</select>
</p>


~~~js
var select_example = new Select({el: $('#select-example')[0]});
select_example.on('change', function(e){ alert('You picked: '+e.value);})
~~~

<script>
$(function () {
  var select_example = new Select({el: $('#select-example')[0]});
  select_example.on('change', function(e){ alert('You picked: '+e.value);})
})
</script>

## 4: Containing

Contain the drop element to a parent

<div class="some-container">
  <button class='btn drop-example-4'>Hello, Click Me</button>
</div>

~~~html
<div class="some-container">
  <button class='btn drop-example-4'>Hello, Click Me</button>
</div>
~~~
~~~css
.some-container {
  border: 1px solid black;
  width: 400px;
  height: 250px;
  overflow: auto;
  position: relative;
}
~~~
~~~js
$(function () {
  var drop4;
  drop4 = new Drop({
    target: document.querySelector('.drop-example-4'),
    content: 'Welcome to the whatever <pre>yadda yadda yadda yadda yadda yadda yadda yadda yadda</pre>',
    position: 'bottom center',
    classes: 'drop-theme-arrows-bounce',
    openOn: 'click',
    tetherOptions: {
      constraints: [
          {
            to: 'scrollParent',
            pin: true
          }
        ]
    }
  });
});
~~~

<style>
.some-container {
  border: 1px solid black;
  width: 400px;
  height: 250px;
  overflow: auto;
  position: relative;
}
</style>

<script>
$(function () {
  var drop4;
  drop4 = new Drop({
    target: document.querySelector('.drop-example-4'),
    content: 'Welcome to the whatever <pre>yadda yadda yadda yadda yadda yadda yadda yadda yadda</pre>',
    position: 'bottom center',
    classes: 'drop-theme-arrows-bounce',
    openOn: 'click',
    tetherOptions: {
      constraints: [
          {
            to: 'scrollParent',
            pin: true
          }
        ]
    }
  });
});
</script>