From 23504403d1320b5da85989b75dd1d491fa58721a Mon Sep 17 00:00:00 2001
From: Zeno Rocha <hi@zenorocha.com>
Date: Mon, 28 Sep 2015 23:52:10 -0700
Subject: [PATCH] Adds advanced usage docs

---
 index.html | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/index.html b/index.html
index a882158..6e5e2ef 100644
--- a/index.html
+++ b/index.html
@@ -130,6 +130,26 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
     Copy to clipboard
 &lt;/button&gt;</code></pre>
 
+        <h1 id="advanced-usage">Advanced Usage</h1>
+
+        <p>If you don't want to modify your HTML, there's a pretty handy imperative API for you to use. All you need to do is declare a function, do your thing, and return a value.</p>
+
+        <p>For instance, if you want to dynamically set a <code>target</code>, you'll need to return a Node.</p>
+
+        <pre><code class="js">new Clipboard('.btn', {
+    target: function(trigger) {
+        return trigger.nextElementSibling;
+    }
+});</code></pre>
+
+        <p>If you want to dynamically set a <code>text</code>, you'll return a String.</p>
+
+        <pre><code class="js">new Clipboard('.btn', {
+    text: function(trigger) {
+        return trigger.getAttribute('aria-label');
+    }
+});</code></pre>
+
         <h1 id="events">Events</h1>
 
         <p>There are cases where you'd like to show some user feedback or capture what has been selected after a copy/cut operation.</p>