docs: add html file example

closes atomiks#786
GideonBabu · Jun 20, 2020 · 335c2db · 335c2db
1 parent c420fcf
commit 335c2db
Show file tree

Hide file tree

Showing 4 changed files with 2,825 additions and 2,149 deletions.
diff --git a/website/src/components/Layout.js b/website/src/components/Layout.js
@@ -12,7 +12,7 @@ import {
   MEDIA,
   ExternalLink,
 } from './Framework';
-import Tippy, {TippySingleton} from './Tippy';
+import Tippy from './Tippy';
 import Nav from './Nav';
 import NavButtons from './NavButtons';
 import Header from './Header';
@@ -124,7 +124,6 @@ class Heading extends React.Component {
 
 const components = {
   Tippy,
-  TippySingleton,
   Demo,
   Button,
   Row,

diff --git a/website/src/pages/v6/creation.mdx → website/src/pages/v6/constructor.mdx b/website/src/pages/v6/creation.mdx → website/src/pages/v6/constructor.mdx
@@ -1,26 +1,28 @@
 ---
-title: Creation
-path: /v6/creation/
+title: Constructor
+path: /v6/constructor/
 index: 2
 ---
 
-Give elements you would like to give tooltips to a `data-tippy-content`
-attribute:
+The `tippy()` constructor (a plain function) creates individual tippy instances.
+To give the tippy content you have two options:
+
+### Attribute
+
+With some elements on the document:
 
 ```html
 <button data-tippy-content="Tooltip">Text</button>
 <button data-tippy-content="Another Tooltip">Text</button>
 ```
 
-To give them a tippy tooltip, call the `tippy()` function with a CSS selector
-matching these elements:
+Call the `tippy()` constructor with a CSS selector matching them:
 
 ```js
 tippy('[data-tippy-content]');
 ```
 
-The `data-tippy-content` attribute allows you to give different tooltip content
-to many different elements, while only needing to initialize once.
+### Prop
 
 If targeting a single element, you can use the `content` prop instead of the
 attribute:

diff --git a/website/src/pages/v6/getting-started.mdx b/website/src/pages/v6/getting-started.mdx
@@ -53,6 +53,29 @@ don't get removed.
 > (`tippy-bundle`). With CSP enabled, you may need to separately link
 > `dist/tippy.css` and use `dist/tippy.umd.min.js` instead.
 
+### Usage
+
+```html
+<html>
+  <head>
+    <title>Tippy</title>
+  </head>
+  <body>
+    <button id="myButton">My button</button>
+
+    <script src="https://unpkg.com/@popperjs/core@2"></script>
+    <script src="https://unpkg.com/tippy.js@6"></script>
+    <script>
+      // With the above scripts loaded, you can call `tippy()` with a CSS
+      // selector and a `content` prop:
+      tippy('#myButton', {
+        content: 'My tooltip!',
+      });
+    </script>
+  </body>
+</html>
+```
+
 ### React
 
 Using React? Use the