formstone/docs/json/tooltip.json

Library of modular front end components.

{"main":["tooltip.js","tooltip.css"],"options":[{"name":"customClass","type":"string","default":"''","description":"Class applied to instance"},{"name":"delay","type":"int","default":"0","description":"Hover delay"},{"name":"direction","type":"string","default":"'top'","description":"Tooltip direction"},{"name":"follow","type":"boolean","default":"false","description":"Flag to follow mouse"},{"name":"formatter","type":"function","default":"$.noop","description":"Text format function"},{"name":"margin","type":"int","default":"15","description":"Tooltip margin"},{"name":"match","type":"boolean","default":"false","description":"Flag to match mouse position"},{"name":"theme","type":"string","default":"\"fs-light\"","description":"Theme class name"}],"events":[],"methods":[{"name":"defaults","description":"Extends plugin default settings; effects instances created hereafter.","params":[{"name":"options","type":"object","default":"{}","description":"New plugin defaults"}],"examples":["$.tooltip(\"defaults\", { ... });"]},{"name":"destroy","description":"Removes plugin instance.","examples":["$(\".target\").tooltip(\"destroy\");"]}],"name":"Tooltip","type":"widget","description":"A jQuery plugin for simple tooltips.","dependencies":["jQuery","core.js"],"css":[{"name":".fs-tooltip-element","type":"element","description":"Target elmement"},{"name":".fs-tooltip","type":"element","description":"Base widget class"},{"name":".fs-tooltip.fs-tooltip-visible","type":"modifier","description":"Inidcates visible state"},{"name":".fs-tooltip.fs-tooltip-right","type":"modifier","description":"Inidcates right side display"},{"name":".fs-tooltip.fs-tooltip-left","type":"modifier","description":"Inidcates left side display"},{"name":".fs-tooltip.fs-tooltip-top","type":"modifier","description":"Inidcates top display"},{"name":".fs-tooltip.fs-tooltip-bottom","type":"modifier","description":"Inidcates bottom display"},{"name":".fs-tooltip-content","type":"element","description":"Tooltip content wrapper"},{"name":".fs-tooltip-caret","type":"element","description":"Tooltip caret"}],"use":"### Basic\n\nTooltip will generate a tooltip based on the target element's `data-title` attribute. Tooltip can be configured to open in a specific direction by setting the `direction` key at initialization:\n\n```javascript\n$(\"a\").tooltip({\n  direction: \"top\"\n});\n```\n\n```markup\n<a href=\"#\" data-title=\"ToolTip Text\">Tooltip Target</a>\n```\n\n<!--\n### Follow\n\nTooltip can be configured to follow the user's mouse:\n\n```javascript\n$(\"a\").tooltip({\n  follow: true\n});\n```\n\n### Match\n\nTooltip can be configured to match the user's mouse position, relative to the target:\n\n```javascript\n$(\"a\").tooltip({\n  match: true\n});\n```\n-->\n\n### Delay\n\nA delay can be set to avoid accidental tooltips:\n\n```javascript\n$(\"a\").tooltip({\n  delay: 500\n});\n```","demo":"<h4>Basic</h4>\n\n<!-- START: FIRSTDEMO -->\n\n<style>\n  .center { text-align: center; }\n\n  .tooltips { margin: 20px 0; overflow: hidden; }\n\n  .tooltip { background: #00bcd4; border-radius: 3px; color: #fff; clear: both; display: block; height: 50px; line-height: 50px; margin: 0 auto 10px; text-align: center; width: 50%; }\n  .long_text .fs-tooltip-content { width: 250px; white-space: normal; }\n</style>\n\n<div class=\"demo_container\">\n  <div class=\"demo_example\">\n    <div class=\"tooltips\">\n      <div class=\"tooltip js-tooltip\" data-title=\"Left Tooltip\"   data-tooltip-options='{\"direction\":\"left\"}'>Left</div>\n      <div class=\"tooltip js-tooltip\" data-title=\"Right Tooltip\"  data-tooltip-options='{\"direction\":\"right\"}'>Right</div>\n      <div class=\"tooltip js-tooltip\" data-title=\"Top Tooltip\"    data-tooltip-options='{\"direction\":\"top\"}'>Top</div>\n      <div class=\"tooltip js-tooltip\" data-title=\"Bottom Tooltip\" data-tooltip-options='{\"direction\":\"bottom\"}'>Bottom</div>\n    </div>\n  </div>\n  <div class=\"demo_code\">\n    <pre><code class=\"language-html\">&lt;a href=&quot;page.html&quot; class=&quot;tooltip&quot; data-title=&quot;Tooltip Content&quot;&gt;Tooltip Handle&lt;/a&gt;</code></pre>\n    <pre><code class=\"language-javascript\">$(\".tooltip\").tooltip({\n  direction: \"top\"\n});</code></pre>\n  </div>\n</div>\n\n<!-- END: FIRSTDEMO -->\n\n<h4>Follow</h4>\n<div class=\"demo_container\">\n  <div class=\"demo_example\">\n    <div class=\"tooltips\">\n      <div class=\"tooltip js-tooltip\" data-title=\"Left Tooltip\"    data-tooltip-options='{\"direction\":\"left\",\"follow\":\"true\"}'>Left</div>\n      <div class=\"tooltip js-tooltip\" data-title=\"Right Tooltip\"   data-tooltip-options='{\"direction\":\"right\",\"follow\":\"true\"}'>Right</div>\n      <div class=\"tooltip js-tooltip\" data-title=\"Top Tooltip\"     data-tooltip-options='{\"direction\":\"top\",\"follow\":\"true\"}'>Top</div>\n      <div class=\"tooltip js-tooltip\" data-title=\"Bottom Tooltip\"  data-tooltip-options='{\"direction\":\"bottom\",\"follow\":\"true\"}'>Bottom</div>\n    </div>\n  </div>\n  <div class=\"demo_code\">\n    <pre><code class=\"language-html\">&lt;a href=&quot;page.html&quot; class=&quot;tooltip&quot; data-title=&quot;Tooltip Content&quot;&gt;Tooltip Handle&lt;/a&gt;</code></pre>\n    <pre><code class=\"language-javascript\">$(\".tooltip\").tooltip({\n  direction: \"left\",\n  follow: true\n});</code></pre>\n  </div>\n</div>\n\n<h4>Match</h4>\n<div class=\"demo_container\">\n  <div class=\"demo_example\">\n    <div class=\"tooltips\">\n      <div class=\"tooltip js-tooltip\" data-title=\"Left Tooltip\"    data-tooltip-options='{\"direction\":\"left\",\"match\":\"true\"}'>Left</div>\n      <div class=\"tooltip js-tooltip\" data-title=\"Right Tooltip\"   data-tooltip-options='{\"direction\":\"right\",\"match\":\"true\"}'>Right</div>\n      <div class=\"tooltip js-tooltip\" data-title=\"Top Tooltip\"     data-tooltip-options='{\"direction\":\"top\",\"match\":\"true\"}'>Top</div>\n      <div class=\"tooltip js-tooltip\" data-title=\"Bottom Tooltip\"  data-tooltip-options='{\"direction\":\"bottom\",\"match\":\"true\"}'>Bottom</div>\n    </div>\n  </div>\n  <div class=\"demo_code\">\n    <pre><code class=\"language-html\">&lt;a href=&quot;page.html&quot; class=&quot;tooltip&quot; data-title=&quot;Tooltip Content&quot;&gt;Tooltip Handle&lt;/a&gt;</code></pre>\n    <pre><code class=\"language-javascript\">$(\".tooltip\").tooltip({\n  direction: \"bottom\",\n  match: true\n});</code></pre>\n  </div>\n</div>\n\n<h4>Delay</h4>\n<div class=\"demo_container\">\n  <div class=\"demo_example\">\n    <div class=\"tooltips\">\n      <div class=\"tooltip js-tooltip\" data-title=\"Left Tooltip\"    data-tooltip-options='{\"direction\":\"left\",\"delay\":\"500\"}'>Left</div>\n      <div class=\"tooltip js-tooltip\" data-title=\"Right Tooltip\"   data-tooltip-options='{\"direction\":\"right\",\"delay\":\"500\"}'>Right</div>\n      <div class=\"tooltip js-tooltip\" data-title=\"Top Tooltip\"     data-tooltip-options='{\"direction\":\"top\",\"delay\":\"500\"}'>Top</div>\n      <div class=\"tooltip js-tooltip\" data-title=\"Bottom Tooltip\"  data-tooltip-options='{\"direction\":\"bottom\",\"delay\":\"500\"}'>Bottom</div>\n    </div>\n  </div>\n  <div class=\"demo_code\">\n    <pre><code class=\"language-html\">&lt;a href=&quot;page.html&quot; class=&quot;tooltip&quot; data-title=&quot;Tooltip Content&quot;&gt;Tooltip Handle&lt;/a&gt;</code></pre>\n    <pre><code class=\"language-javascript\">$(\".tooltip\").tooltip({\n  direction: \"right\",\n  delay: 500\n});</code></pre>\n  </div>\n</div>\n\n<!-- <h4>Long Text</h4>\n<div class=\"demo_container\">\n  <div class=\"demo_example\">\n    <div class=\"tooltips\">\n      <div class=\"tooltip js-tooltip\" data-title=\"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. \" data-tooltip-options='{\"customClass\":\"long_text\",\"direction\":\"top\"}'>Left</div>\n    </div>\n  </div>\n  <div class=\"demo_code\">\n    <pre><code class=\"language-html\"></code></pre>\n    <pre><code class=\"language-javascript\">$(\".tooltip\").tooltip({\n\n});</code></pre>\n  </div>\n</div> -->\n\n<h4>No Theme</h4>\n<div class=\"demo_container\">\n  <div class=\"demo_example\">\n    <div class=\"tooltips\">\n      <div class=\"tooltip js-tooltip\" data-title=\"No Theme\" data-tooltip-options='{\"theme\":\"\",\"direction\":\"bottom\"}'>No Theme</div>\n    </div>\n  </div>\n  <div class=\"demo_code\">\n    <pre><code class=\"language-html\">&lt;a href=&quot;page.html&quot; class=&quot;tooltip&quot; data-title=&quot;Tooltip Content&quot;&gt;Tooltip Handle&lt;/a&gt;</code></pre>\n    <pre><code class=\"language-javascript\">$(\".tooltip\").tooltip({\n  direction: \"top\",\n  theme: \"\"\n});</code></pre>\n  </div>\n</div>\n","document":"# Tooltip\n\nA jQuery plugin for simple tooltips.\n\n<!-- HEADER END -->\n\n<!-- NAV START -->\n\n* [Use](#use)\n* [Options](#options)\n* [Methods](#methods)\n* [CSS](#css)\n\n<!-- NAV END -->\n\n<!-- DEMO BUTTON -->\n\n<a name=\"use\"></a>\n\n## Using Tooltip\n\n\n#### Main\n\n```markup\ntooltip.js\ntooltip.css\n```\n\n\n#### Dependencies\n\n```markup\njQuery\ncore.js\n```\n\n### Basic\n\nTooltip will generate a tooltip based on the target element's `data-title` attribute. Tooltip can be configured to open in a specific direction by setting the `direction` key at initialization:\n\n```javascript\n$(\"a\").tooltip({\n  direction: \"top\"\n});\n```\n\n```markup\n<a href=\"#\" data-title=\"ToolTip Text\">Tooltip Target</a>\n```\n\n<!--\n### Follow\n\nTooltip can be configured to follow the user's mouse:\n\n```javascript\n$(\"a\").tooltip({\n  follow: true\n});\n```\n\n### Match\n\nTooltip can be configured to match the user's mouse position, relative to the target:\n\n```javascript\n$(\"a\").tooltip({\n  match: true\n});\n```\n-->\n\n### Delay\n\nA delay can be set to avoid accidental tooltips:\n\n```javascript\n$(\"a\").tooltip({\n  delay: 500\n});\n```\n\n\n<a name=\"options\"></a>\n\n## Options\n\nSet instance options by passing a valid object at initialization, or to the public `defaults` method. Custom options for a specific instance can also be set by attaching a `data-tooltip-options` attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `customClass` | `string` | `''` | Class applied to instance |\n| `delay` | `int` | `0` | Hover delay |\n| `direction` | `string` | `'top'` | Tooltip direction |\n| `follow` | `boolean` | `false` | Flag to follow mouse |\n| `formatter` | `function` | `$.noop` | Text format function |\n| `margin` | `int` | `15` | Tooltip margin |\n| `match` | `boolean` | `false` | Flag to match mouse position |\n| `theme` | `string` | `\"fs-light\"` | Theme class name |\n\n<hr>\n<a name=\"methods\"></a>\n\n## Methods\n\nMethods are publicly available to all active instances, unless otherwise stated.\n\n### defaults\n\nExtends plugin default settings; effects instances created hereafter.\n\n```javascript\n$.tooltip(\"defaults\", { ... });\n```\n\n#### Parameters\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `options` | `object` | `{}` | New plugin defaults |\n\n### destroy\n\nRemoves plugin instance.\n\n```javascript\n$(\".target\").tooltip(\"destroy\");\n```\n\n<hr>\n<a name=\"css\"></a>\n\n## CSS\n\n| Class | Type | Description |\n| --- | --- | --- |\n| `.fs-tooltip-element` | `element` | Target elmement |\n| `.fs-tooltip` | `element` | Base widget class |\n| `.fs-tooltip.fs-tooltip-visible` | `modifier` | Inidcates visible state |\n| `.fs-tooltip.fs-tooltip-right` | `modifier` | Inidcates right side display |\n| `.fs-tooltip.fs-tooltip-left` | `modifier` | Inidcates left side display |\n| `.fs-tooltip.fs-tooltip-top` | `modifier` | Inidcates top display |\n| `.fs-tooltip.fs-tooltip-bottom` | `modifier` | Inidcates bottom display |\n| `.fs-tooltip-content` | `element` | Tooltip content wrapper |\n| `.fs-tooltip-caret` | `element` | Tooltip caret |\n\n"}