initial commit

.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+insert_final_newline = true
+charset = utf-8
+trim_trailing_whitespace = true
+end_of_line = lf
+
+[*.{js,json}]
+indent_style = space
+indent_size = 2

.gitignore

@@ -0,0 +1,28 @@
+.*
+
+# except
+!.editorconfig
+!.eslintrc.json
+!.github
+!.gitignore
+!.gitkeep
+!.lintstagedrc
+!.node-version
+!.npmignore
+!.npmrc
+!.nvmrc
+!.prettierignore
+!.prettierrc.json
+!.lintstagedrc
+!.husky
+!.storybook
+
+# generated
+.vercel
+/node_modules
+/lib
+/dist
+
+# testing
+coverage
+artifacts

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/post-merge

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+# git hook to run a command after `git pull` if a specified file was changed
+# Run `chmod +x .husky/post-merge` to make it executable then put it into `.git/hooks/`.
+
+changes="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)"
+
+check() {
+  echo "$changes" | grep --quiet "$1" && eval "$2"
+}
+
+check package.json "npm install"

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.lintstagedrc

@@ -0,0 +1,3 @@
+{
+  "./src/**/*.{test.js,js,svelte}": ["eslint -c ./.eslintrc.js --fix", "prettier --write"]
+}

.prettierignore

@@ -0,0 +1,2 @@
+package.json
+/src/**/*.snap.js

.prettierrc.json

@@ -0,0 +1,13 @@
+{
+  "printWidth": 120,
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": true,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "singleQuote": true,
+  "svelteSortOrder": "options-scripts-markup-styles",
+  "svelteStrictMode": false,
+  "svelteBracketNewLine": true,
+  "svelteAllowShorthand": true
+}

CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.1](https://github.com/svelte-plugins/tooltips/releases/tag/v0.1.0) - 2022-08-21
+
+- Initial release

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Kieran Boyle
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,130 @@
+# @svelte-plugins/tooltips
+
+A simple tooltip action and component designed for Svelte.
+
+Try it in the [Svelte REPL](https://svelte.dev/repl/e63e262a91834400aa567b9b0d20675a?version=3.49.0).
+
+## Install
+
+```bash
+yarn add -D @svelte-plugins/tooltips
+
+# or with NPM
+
+npm i -D @svelte-plugins/tooltips
+```
+
+## Using the Tooltip component
+```svelte
+<script>
+  import { Tooltip } from "@svelte-plugins/tooltips";
+</script>
+
+<Tooltip content="Hello world!">
+ Check out my tooltip
+</Tooltip>
+```
+
+## Using the Tooltip action
+
+```svelte
+<script>
+  import { tooltip } from "@svelte-plugins/tooltips";
+</script>
+
+Checkout out my <u title="Hello World!" use:tooltip>tooltip</u>
+
+Checkout out my <u use:tooltip={{ content: 'Hello World!' }}>tooltip</u>
+```
+
+## API
+
+### Props
+| Prop         | Description                                                         | Value                                           |
+| :----------- | :------------------------------------------------------------------ | :---------------------------------------------- |
+| action       | The action that triggers the tooltip (hover | click | prop)         | `string` (default: `hover`)                     |
+| animation    | The animation to apply to the tooltip                               | `string` (default: ``)                          |
+| arrow        | If `false`, the tooltip arrow will not be shown.                    | `boolean` (default: `true`)                     |
+| autoPosition | Adjust tooltip position if viewport clipping occurs                 | `string` (default: `false`)                     |
+| content      | The string or object containing componentref and props              | `string` | `object` component (default: ``)     |
+| maxWidth     | The max allowable width of the tooltip content                      | `number` (default: `200`)                       |
+| position     | The position where the tooltip should appear relative to its parent | `string` (default: `top`)                       |
+| theme        | The CSS theme class name                                            | `string` (default: ``)                          |
+| show         | Allows you to manually control the tooltip visibility               | `boolean` (default: `false`)                    |
+| style        | The object containing theme variable overrides                      | `object` (default: `null`)                      |
+
+#### Using components as content
+| Prop              | Description                                                    | Value                               |
+| :-----------------| :------------------------------------------------------------- | :---------------------------------- |
+| content.component | Svelte component                                               | `component` (default: `null`)       |
+| content.props     | Any component propeties                                        | `object` (default: `null`)          |
+
+
+```svelte
+<script>
+  import ComponentAsTooltip from './ComponentAsTooltip';
+</script>
+
+Checkout out my <span use:tooltip={{ content: { component: ComponentAsTooltip, props: { title: 'Hello World!' } } }}>tooltip</span>
+```
+
+## Theming
+You can customize tooltips theme using several methods:
+- Assign a theme class name via the `theme` property that includes all of your CSS variables overrides
+- Define the overrides directly using the `style` property
+- Override the CSS variables globally
+
+Tooltip CSS variables:
+
+```css
+--tooltip-arrow-size: 10px;
+--tooltip-background-color: rgba(0, 0, 0, 0.9);
+--tooltip-border-radius: 4px;
+--tooltip-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25);
+--tooltip-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+  'Helvetica Neue', sans-serif;
+--tooltip-font-size: 14px;
+--tooltip-font-weight: 500;
+--tooltip-line-height: 1.25rem;
+--tooltip-color: #fff;
+--tooltip-offset-x: 12px;
+--tooltip-offset-y: 12px;
+--tooltip-padding: 12px;
+--tooltip-white-space-hidden: nowrap;
+--tooltip-white-space-shown: normal;
+--tooltip-z-index: 100;
+```
+
+### Using the theme property
+
+```svelte
+// action
+<span title="hello world!" use:tooltip={{ theme: 'custom-tooltip' }}>Hover over me</span>
+
+// component
+<Tooltip content="hello world!" theme="custom-tooltip">Hover over me</Tooltip>
+
+<style>
+  :global(.tooltip.custom-tooltip) {
+    --tooltip-background-color: hotpink;
+    --tooltip-box-shadow: 0 1px 8px pink;
+  }
+</style>
+```
+
+### Using the style property
+```svelte
+// action
+<span title="hello world!" use:tooltip={{ style: { backgroundColor: 'blue', borderRadius: '10px' } }}>Hover over me</span>
+
+// component
+<Tooltip content="hello world!" style={{ style: { backgroundColor: 'blue' } }}>Hover over me</Tooltip>
+```
+
+## Changelog
+
+[Changelog](CHANGELOG.md)
+
+## License
+
+[MIT](LICENSE)

babel.config.json

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env"
+    ]
+  ]
+}

docs/.gitignore

@@ -0,0 +1,7 @@
+.*
+!.gitignore
+*.log
+
+# generated
+build
+/node_modules

docs/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@svelte-plugins/datepicker</title>
+
+    <link rel="icon" type="image/png" href="./favicon.png" />
+    <link rel="stylesheet" href="./global.css" />
+
+    <meta name="description" content="A simple rule-based approach to tracking element viewability." />
+    <meta name="keywords" content="datepicker, dates, picker, time picker, daterange, daterange picker, timepicker, calendar, svelte component" />
+
+    <meta property="og:url" content="" />
+    <meta property="og:title" content="@svelte-plugins/datepicker" />
+    <meta property="og:description" content="A simple datepicker designed for Svelte." />
+    <meta property="og:image" content="favicon.png" />
+
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:creator" content="@norcalkieran" />
+    <meta name="twitter:title" content="@svelte-plugins/datepicker" />
+    <meta name="twitter:description" content="A simple tooltip action and component designed for Svelte." />
+    <meta name="twitter:image" content="favicon.png" />
+  </head>
+  <body>
+    <a href="https://github.com/svelte-plugins/datepicker" class="github-ribbon"><img loading="lazy" width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
+    <script type="module" src="/src/index.js"></script>
+  </body>
+</html>