Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@atlaskit/tooltip

Package Overview
Dependencies
Maintainers
1
Versions
232
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@atlaskit/tooltip - npm Package Compare versions

Comparing version 8.0.0 to 8.0.1

dist/cjs/components/Animation.js

253

CHANGELOG.md

@@ -1,277 +0,158 @@

<a name="8.0.0"></a>
# 8.0.0 (2017-11-13)
# @atlaskit/tooltip
## 8.0.0 (2017-11-10)
* This was an accidental release - do no use, go directly to 8.0.1
<a name="8.0.0"></a>
# 8.0.0 (2017-11-13)
## 7.0.0 (2017-11-10)
* added flow types
* rewritten the logic for positioning tooltips, removed Popper.js
* uses @atlaskit/layer-manager to render outside app context/stack
* removed stateless component
* \`description\` has been renamed to \`content\`
<a name="8.0.0"></a>
# 8.0.0 (2017-11-13)
<a name="6.2.2"></a>
## 6.2.2 (2017-10-26)
### Bug Fixes
* **stories:** fix to rebuild stories ([793b2a7](https://bitbucket.org/atlassian/atlaskit/commits/793b2a7))
<a name="6.2.1"></a>
* bug fix; fix to rebuild stories ([793b2a7](https://bitbucket.org/atlassian/atlaskit/commits/793b2a7))
## 6.2.1 (2017-10-22)
* bug fix; update styled components dep and react peerDep ([5539ada](https://bitbucket.org/atlassian/atlaskit/commits/5539ada))
## 6.2.0 (2017-10-18)
### Bug Fixes
* **package:** update styled components dep and react peerDep ([5539ada](https://bitbucket.org/atlassian/atlaskit/commits/5539ada))
* feature; add trigger prop to tooltip ([7721243](https://bitbucket.org/atlassian/atlaskit/commits/7721243))
* feature; use mouseEnter and mouseLeave instead of mouseOver and mouseOut ([55cf15e](https://bitbucket.org/atlassian/atlaskit/commits/55cf15e))
## 6.1.0 (2017-10-18)
<a name="6.1.0"></a>
# 6.1.0 (2017-10-18)
* feature; add trigger prop to tooltip ([7721243](https://bitbucket.org/atlassian/atlaskit/commits/7721243))
* feature; use mouseEnter and mouseLeave instead of mouseOver and mouseOut ([55cf15e](https://bitbucket.org/atlassian/atlaskit/commits/55cf15e))
## 6.0.0 (2017-08-30)
<a name="6.1.0"></a>
# 6.1.0 (2017-10-18)
* breaking; The tooltip trigger is now wrapped in a div with 'display: inline-block' applied. Previously it was ([de263e5](https://bitbucket.org/atlassian/atlaskit/commits/de263e5))
* breaking; tooltip now disappears as soon as the mouse leaves the trigger (issues closed: ak-1834) ([de263e5](https://bitbucket.org/atlassian/atlaskit/commits/de263e5))
### Features
* **component:** add trigger prop to tooltip ([7721243](https://bitbucket.org/atlassian/atlaskit/commits/7721243))
* **component:** use mouseEnter and mouseLeave instead of mouseOver and mouseOut ([55cf15e](https://bitbucket.org/atlassian/atlaskit/commits/55cf15e))
<a name="6.0.0"></a>
# 6.0.0 (2017-08-30)
### Bug Fixes
* **component:** tooltip now disappears as soon as the mouse leaves the trigger ([de263e5](https://bitbucket.org/atlassian/atlaskit/commits/de263e5))
### BREAKING CHANGES
* **component:** The tooltip trigger is now wrapped in a div with 'display: inline-block' applied. Previously it was
a plain div with default 'display: block' styling.
ISSUES CLOSED: AK-1834
<a name="5.0.1"></a>
## 5.0.1 (2017-08-21)
* bug fix; fix PropTypes warning ([040d579](https://bitbucket.org/atlassian/atlaskit/commits/040d579))
## 5.0.0 (2017-08-11)
### Bug Fixes
* bug fix; fix the theme-dependency ([db90333](https://bitbucket.org/atlassian/atlaskit/commits/db90333))
* **component:** fix PropTypes warning ([040d579](https://bitbucket.org/atlassian/atlaskit/commits/040d579))
* breaking; affects internal styled-components implementation ([d14522a](https://bitbucket.org/atlassian/atlaskit/commits/d14522a))
* breaking; implement dark mode theme ([d14522a](https://bitbucket.org/atlassian/atlaskit/commits/d14522a))
* feature; updated dark colors for Tooltip ([8fbbb8c](https://bitbucket.org/atlassian/atlaskit/commits/8fbbb8c))
<a name="4.0.0"></a>
# 4.0.0 (2017-08-11)
### Bug Fixes
* **package:** fix the theme-dependency ([db90333](https://bitbucket.org/atlassian/atlaskit/commits/db90333))
* feature; new theme methods ([3656ee3](https://bitbucket.org/atlassian/atlaskit/commits/3656ee3))
* feature; add dark mode support to tooltip ([aa87b89](https://bitbucket.org/atlassian/atlaskit/commits/aa87b89))
## 4.0.0 (2017-08-11)
<a name="4.0.0"></a>
# 4.0.0 (2017-08-11)
* breaking; affects internal styled-components implementation ([d14522a](https://bitbucket.org/atlassian/atlaskit/commits/d14522a))
* breaking; implement dark mode theme ([d14522a](https://bitbucket.org/atlassian/atlaskit/commits/d14522a))
* feature; updated dark colors for Tooltip ([8fbbb8c](https://bitbucket.org/atlassian/atlaskit/commits/8fbbb8c))
### Features
* **component:** implement dark mode theme ([d14522a](https://bitbucket.org/atlassian/atlaskit/commits/d14522a))
* **component:** new theme methods ([3656ee3](https://bitbucket.org/atlassian/atlaskit/commits/3656ee3))
* **component:** updated dark colors for Tooltip ([8fbbb8c](https://bitbucket.org/atlassian/atlaskit/commits/8fbbb8c))
### BREAKING CHANGES
* **component:** affects internal styled-components implementation
* feature; new theme methods ([3656ee3](https://bitbucket.org/atlassian/atlaskit/commits/3656ee3))
* feature; add dark mode support to tooltip ([aa87b89](https://bitbucket.org/atlassian/atlaskit/commits/aa87b89))
<a name="3.4.2"></a>
## 3.4.2 (2017-07-27)
### Bug Fixes
* fix; rename jsnext:main to jsnext:experimental:main temporarily ([c7508e0](https://bitbucket.org/atlassian/atlaskit/commits/c7508e0))
* **package:** rename jsnext:main to jsnext:experimental:main temporarily ([c7508e0](https://bitbucket.org/atlassian/atlaskit/commits/c7508e0))
<a name="3.4.1"></a>
## 3.4.1 (2017-07-25)
### Bug Fixes
* fix; use class transform in loose mode in babel to improve load performance in apps ([fde719a](https://bitbucket.org/atlassian/atlaskit/commits/fde719a))
* **build:** use class transform in loose mode in babel to improve load performance in apps ([fde719a](https://bitbucket.org/atlassian/atlaskit/commits/fde719a))
## 3.1.0 (2017-07-17)
## 3.1.0 (2017-07-17)
### Features
## 3.1.0 (2017-07-17)
* **component:** add dark mode support to tooltip ([aa87b89](https://bitbucket.org/atlassian/atlaskit/commits/aa87b89))
* fix; rerelease, failed prepublish scripts ([5fd82f8](https://bitbucket.org/atlassian/atlaskit/commits/5fd82f8))
## 3.1.0 (2017-07-17)
<a name="3.1.0"></a>
# 3.1.0 (2017-07-17)
* feature; added ES module builds to dist and add jsnext:main to most ADG packages ([ea76507](https://bitbucket.org/atlassian/atlaskit/commits/ea76507))
## 2.0.0 (2017-07-17)
<a name="3.1.0"></a>
# 3.1.0 (2017-07-17)
null replace LESS with SC ([d1b5911](https://bitbucket.org/atlassian/atlaskit/commits/d1b5911))
<a name="3.1.0"></a>
# 3.1.0 (2017-07-17)
* breaking; named export "Tooltip" is now "TooltipStateless". prop "visible" is now "isVisible"
### Bug Fixes
* **package:** rerelease, failed prepublish scripts ([5fd82f8](https://bitbucket.org/atlassian/atlaskit/commits/5fd82f8))
<a name="3.1.0"></a>
# 3.1.0 (2017-07-17)
### Features
* **package:** added ES module builds to dist and add jsnext:main to most ADG packages ([ea76507](https://bitbucket.org/atlassian/atlaskit/commits/ea76507))
<a name="2.0.0"></a>
# 2.0.0 (2017-07-17)
### Code Refactoring
* **component:** replace LESS with SC ([d1b5911](https://bitbucket.org/atlassian/atlaskit/commits/d1b5911))
### BREAKING CHANGES
* **component:** named export "Tooltip" is now "TooltipStateless". prop "visible" is now "isVisible"
ISSUES CLOSED: AK-2059
<a name="1.2.1"></a>
## 1.2.1 (2017-07-13)
### Bug Fixes
* fix; add prop-types as a dependency to avoid React 15.x warnings ([92598eb](https://bitbucket.org/atlassian/atlaskit/commits/92598eb))
* **package:** add prop-types as a dependency to avoid React 15.x warnings ([92598eb](https://bitbucket.org/atlassian/atlaskit/commits/92598eb))
## 1.2.0 (2017-05-10)
* feature; bump layer version in [@atlaskit](https://github.com/atlaskit)/tooltip ([cfa9903](https://bitbucket.org/atlassian/atlaskit/commits/cfa9903))
<a name="1.2.0"></a>
# 1.2.0 (2017-05-10)
### Features
* **package:** bump layer version in [@atlaskit](https://github.com/atlaskit)/tooltip ([cfa9903](https://bitbucket.org/atlassian/atlaskit/commits/cfa9903))
<a name="1.1.2"></a>
## 1.1.2 (2017-04-27)
### Bug Fixes
* fix; update legal copy to be more clear. Not all modules include ADG license. ([f3a945e](https://bitbucket.org/atlassian/atlaskit/commits/f3a945e))
* **docs:** update legal copy to be more clear. Not all modules include ADG license. ([f3a945e](https://bitbucket.org/atlassian/atlaskit/commits/f3a945e))
<a name="1.1.1"></a>
## 1.1.1 (2017-04-26)
### Bug Fixes
* fix; update legal copy and fix broken links for component README on npm. New contribution and ([0b3e454](https://bitbucket.org/atlassian/atlaskit/commits/0b3e454))
* **docs:** update legal copy and fix broken links for component README on npm. New contribution and ([0b3e454](https://bitbucket.org/atlassian/atlaskit/commits/0b3e454))
## 1.1.0 (2017-04-20)
* feature; removed explicit style! imports, set style-loader in webpack config ([891fc3c](https://bitbucket.org/atlassian/atlaskit/commits/891fc3c))
<a name="1.1.0"></a>
# 1.1.0 (2017-04-20)
### Features
* **refactor:** removed explicit style! imports, set style-loader in webpack config ([891fc3c](https://bitbucket.org/atlassian/atlaskit/commits/891fc3c))
<a name="1.0.8"></a>
## 1.0.8 (2017-04-04)
### Bug Fixes
* fix; adds defensive code to allow testing in mocha/jsdom ([2eaab5b](https://bitbucket.org/atlassian/atlaskit/commits/2eaab5b))
* **component:** adds defensive code to allow testing in mocha/jsdom ([2eaab5b](https://bitbucket.org/atlassian/atlaskit/commits/2eaab5b))
<a name="1.0.6"></a>
## 1.0.6 (2017-03-21)
<a name="1.0.6"></a>
## 1.0.6 (2017-03-21)
### Bug Fixes
* fix; maintainers for all the packages were added ([261d00a](https://bitbucket.org/atlassian/atlaskit/commits/261d00a))
* **package:** maintainers for all the packages were added ([261d00a](https://bitbucket.org/atlassian/atlaskit/commits/261d00a))
<a name="1.0.5"></a>
## 1.0.5 (2017-03-06)
<a name="1.0.4"></a>
## 1.0.4 (2017-02-28)
### Bug Fixes
* fix; prevent word wrapping of tooltip for TextAdvancdFormatting elements ([31b51a4](https://bitbucket.org/atlassian/atlaskit/commits/31b51a4))
* fix; removes jsdoc annotations and moves content to usage.md ([2d794cd](https://bitbucket.org/atlassian/atlaskit/commits/2d794cd))
* fix; dummy commit to release stories ([3df5d9f](https://bitbucket.org/atlassian/atlaskit/commits/3df5d9f))
* **component:** prevent word wrapping of tooltip for TextAdvancdFormatting elements ([31b51a4](https://bitbucket.org/atlassian/atlaskit/commits/31b51a4))
* **docs:** removes jsdoc annotations and moves content to usage.md ([2d794cd](https://bitbucket.org/atlassian/atlaskit/commits/2d794cd))
* **stories:** dummy commit to release stories ([3df5d9f](https://bitbucket.org/atlassian/atlaskit/commits/3df5d9f))
<a name="1.0.3"></a>
## 1.0.3 (2017-02-20)
### Bug Fixes
* Add missing TS definition for tooltip ([aae714d](https://bitbucket.org/atlassian/atlaskit/commits/aae714d))

@@ -281,23 +162,5 @@ * Add TS definition for tooltip ([5c023e9](https://bitbucket.org/atlassian/atlaskit/commits/5c023e9))

<a name="1.0.2"></a>
## 1.0.2 (2017-02-07)
### Bug Fixes
* **bump:** Updates package to use scoped ak packages ([73d1427](https://bitbucket.org/atlassian/atlaskit/commits/73d1427))
<a name="1.0.1"></a>
## 1.0.1 (2017-02-02)
### Bug Fixes
* **docs:** Updates tooltip docs for stateless component ([11ca4bf](https://bitbucket.org/atlassian/atlaskit/commits/11ca4bf))
* fix; Updates package to use scoped ak packages ([73d1427](https://bitbucket.org/atlassian/atlaskit/commits/73d1427))
{
"name": "@atlaskit/tooltip",
"version": "8.0.0",
"config": {
"access": "public"
},
"description": "This component is used to display extra information to a user about an element by displaying a floating description.",
"main": "dist/bundle.js",
"webpack": "dist/bundle-cjs.js",
"jsnext:experimental:main": "dist/es/index.js",
"ak:webpack:raw": "src/index.jsx",
"ak:component": {
"name": "Tooltip",
"dark": true
},
"scripts": {
"eslint": "../../build/bin/lint.eslint.sh",
"jest": "echo 'yarn run jest is deprecated and removed. please run yarn run test:unit instead.'",
"prepublish": "../../node_modules/.bin/in-publish && { cd ../.. && npm run prepublish-with-babel/single @atlaskit/tooltip; } || ../../node_modules/.bin/not-in-publish",
"storybook": "../../build/bin/storybook/run.local.js",
"storybook:static": "../../build/bin/storybook/build.static.js",
"test:unit": "../../node_modules/.bin/jest -c ../../build/config/jest.config.js"
},
"types": "src/index.d.ts",
"version": "8.0.1",
"description": "A React Component for displaying Tooltips",
"license": "Apache-2.0",
"main": "dist/cjs/index.js",
"atlaskit:src": "src/index.js",
"files": [
"dist"
],
"devDependencies": {
"@atlaskit/button": "^5.1.1",
"@atlaskit/button-group": "^1.5.3",
"@atlaskit/tooltip": "*"
},
"author": "Atlassian Pty Ltd",
"maintainers": [
"Joss M",
"Jed W"
],
"repository": "bitbucket:atlaskit/atlaskit-mk2",
"dependencies": {
"@atlaskit/layer": "^2.5.3",
"@atlaskit/layer-manager": "^2.3.1",
"@atlaskit/theme": "^2.0.0",
"@atlaskit/util-shared-styles": "^2.10.3",
"babel-runtime": "^6.11.6",
"prop-types": "^15.5.10",
"react-transition-group": "^2.2.1",
"styled-components": "^1.4.6"
},
"author": "Atlassian Pty Ltd",
"maintainers": [
{
"name": "Luke B"
}
],
"license": "Apache-2.0",
"peerDependencies": {
"react": "^15.3.2 || ^16.0.0"
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"repository": {
"type": "git",
"url": "https://bitbucket.org/atlassian/atlaskit"
"devDependencies": {
"@atlaskit/button": "^5.4.8",
"@atlaskit/button-group": "^1.5.3",
"@atlaskit/docs": "^0.0.3",
"@atlaskit/icon": "^9.0.1"
},
"keywords": [
"atlaskit",
"react",
"ui"
]
}
}

@@ -1,6 +0,1 @@

[![AtlasKit component registry](https://img.shields.io/badge/AtlasKit-components-FF5230.svg)](http://atlaskit.atlassian.com)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://Commitizen.github.io/cz-cli/)
[![semantic-release](https://img.shields.io/badge/GitHub-semantic_release-ffab00.svg)](https://github.com/semantic-release/semantic-release)
[![Report an issue](https://img.shields.io/badge/Report-an_issue-6554C0.svg)](http://go.atlassian.com/atlaskit-issues)
# Tooltip

@@ -11,129 +6,1 @@

![Example tooltip](https://i.imgur.com/vlvguzg.gif)
## Installation
```sh
npm install @atlaskit/tooltip
```
## Using the component
`@atlaskit/tooltip` exports two tooltip components, one "smart" and one "dumb". The smart component allows you to simply place the tooltip around an element and all the state handling will
be handled for you. The dumb one on the other hand allows you to hook into events and to manage the state yourself.
### Smart Component
```js
// Note we are using the default export here, so the name can be anything
import Tooltip from '@atlaskit/tooltip';
ReactDOM.render(<div>
<Tooltip description="Opens the user preferences screen in a new window" position="bottom">
<button>I do something!</button>
</Tooltip>
</div>, container);
```
In this case, the only props you need to use are `description` and `position` (and the content you want to bind the tooltip to).
If a user were to hover over this button, they would see a tooltip rendered underneath it. If there was not enought space below, the tooltip would automatically move to the top.
### Dumb Component
```js
// Note we are using a named export here, which *must* be 'Tooltip'
import { Tooltip } from '@atlaskit/tooltip';
let tooltipVisibleState = false;
function handleMouseOver() {
tooltipVisibleState = true;
renderButtonInContainer();
}
function handleMouseOut() {
tooltipVisibleState = false;
renderButtonInContainer();
}
function renderButtonInContainer() {
ReactDOM.render(<div>
<Tooltip
description="Opens the user preferences screen in a new window"
position="bottom"
visible={tooltipVisibleState}
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}
>
<button>I do something!</button>
</Tooltip>
</div>, container);
}
```
This is a contrived example to show the usage of `onMouseOver` and `onMouseOut` as a way of controlling your own state.
Obviously your state would normally be stored in a component or value store.
[//]: # (EVERYTHING BELOW THIS COMMENT WAS GENERATED BY JSDOC AND NEEDS TO BE MOVED INTO A STORYBOOK)
[//]: # (DO NOT CHANGE THIS FILE HERE - CREATE THE STORYBOOK!)
<a name="Tooltip"></a>
## Tooltip
**Kind**: global class
* Properties
* [tooltip.position](#Tooltip+position) : <code>string</code>
* [tooltip.description](#Tooltip+description) : <code>string</code>
* [tooltip.visible](#Tooltip+visible) : <code>boolean</code>
<a name="new_Tooltip_new"></a>
### new Tooltip()
React component used to display floating tooltips next to a component.
**HTML Example**
```js
<Tooltip description="Foo!" position="right"><div>Foo</div></Tooltip>
```
<a name="Tooltip+position"></a>
### tooltip.position : <code>string</code>
The location of where the tooltip will appear, relative to the component it
is bound to.
Allowed values: top, bottom, left and right.
**Kind**: instance property of <code>[Tooltip](#Tooltip)</code>
**Default**: <code>&quot;bottom&quot;</code>
<a name="Tooltip+description"></a>
### tooltip.description : <code>string</code>
The text to display in the tooltip when a user hovers over the element.
**Kind**: instance property of <code>[Tooltip](#Tooltip)</code>
**Default**: <code>&quot;&#x27;&#x27;&quot;</code>
<a name="Tooltip+visible"></a>
### tooltip.visible : <code>boolean</code>
Whether or not the tooltip is open and visible on the page.
**Kind**: instance property of <code>[Tooltip](#Tooltip)</code>
**Default**: <code>false</code>
_* Please note that this module could have dependencies that are governed by the Atlassian Design Guidelines license which will be automatically included on install. Each dependency has a license file that indicates whether the Atlassian Design Guidelines license applies._
## We're here to help!
Let us know what you think of our components and docs, your feedback is really important for us.
Are you in trouble? Read through our [contribution guidelines](https://bitbucket.org/atlassian/atlaskit/src/HEAD/CONTRIBUTING.md) and raise an issue to us.

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc