Tooltip
A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
Installation
yarn add @atlaskit/tooltip
Usage
Detailed docs and example usage can be found here.
A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
yarn add @atlaskit/tooltip
Detailed docs and example usage can be found here.
9f62ecec4d422
-
Update dependencies.7b1a8574e9c29
-
Fix or temporarily ignore TypeScript errors that occur in internal React 18 suites.#174355
d0d1aae2aa428
-
Migrated from @emotion/react
to @compiled/react
in order to improve performance, align with
the rest of the Atlaskit techstack, and support React 18 Streaming SSR. Please note, in order to
use this version of @atlaskit/tooltip
, you will need to ensure that your bundler is configured
to handle .css
imports correctly.
Most bundlers come with built-in support for .css
imports, so you may not need to do anything.
If you are using a different bundler, please refer to the documentation for that bundler to
understand how to handle .css
imports. For more information on the migration, please refer to
RFC-73 Migrating our components to Compiled CSS-in-JS.
962b5e77810fb
-
Adds side-effect config to support Compiled css extraction in third-party appse9317ed13ba40
-
Internal refactors to state to reduce the number of JavaScript event listeners.be6f923511512
- -
Added new prop: canAppear
, which can be used to conditionally show tooltips.isScreenReaderAnnouncementDisabled
which can be used to disable hidden text
for tooltips. This is useful when the Tooltip content
matches the Tooltip trigger content as
hidden text is not required.3c4de48168ffe
-
Update the import path of useId*
from @atlaskit/ds-lib
025feb57ca48b
-
Adds usage of the useNotifyLayerObserver hook from the layering package. The hook is behind a
feature flag.cd16d91b93dff
-
We are testing an internal change to use an ID generator compatible with both React 16 and
React 18. If these changes are successful, it will be rolled out in a later release.#127511
db30e29344013
-
Widening range of react
and react-dom
peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0
to the wider range of ^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).
This change has been done to enable usage of `react@18.3as well as to have a consistent peer
dependency range for
reactand
react-domfor
/platform` packages.
8b8090800a35d
-
Bump peer dependency for react-dom to include version 17 and 18.ff0815316ab38
-
Removes usage of custom theme button in places where its API is not being used and the default
button is able to be used instead. This should give a slight performance (runtime) improvement.d131599730792
-
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.9116699f734c
-
Add support for React 18 in non-strict mode.f632d3701e96
-
Add ignoreTooltipPointerEvents
prop. When set to true it adds pointer-events: none
to the
tooltip itself. This will also prevent the tooltip from persisting when hovered.35fd5ed8e1d7
-
Upgrading internal dependency bind-event-listener
to @^3.0.0
d92770eae702
-
Adding internal eslint opt outs for a new rule
@atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
.40c7b496eacd
-
[ux] Internal changes to typography, small visual change to tooltip text line height.8d4e99057fe0
-
Upgrade Typescript from 4.9.5
to 5.4.2
33f4a64132a3
-
Remove duplicate accessible labels on Icon buttons, which were unnecessarily added through the
aria-label
attribute.92b280e734a7
-
Add a hidden tooltip content when tooltip is in a modal for screen reader announcementd00b9272c88c
-
[ux] Tooltips are now hidden during drags. This is to prevent janky UX.1de74609c13
- Removed
all remaining legacy theming logic from the Tag, Toggle and Tooltip components.d51b45b02fb
- Add
component to push model consumption in JFEc93c86d4089
- Tooltip
no longer throws in an effect when the first child of tooltip isn't an element.61779a58ad8
- Tooltip
nolonger memoizes the ref callback function for the implicit passing-children-jsx API. The
children-as-function API remains memoized. For more control and better performance characteristics
we recommend leaning on the explicit children-as-function API over the implicit
passing-children-jsx API.07aa588c8a4
- Reverts
the fix to text descender cut-off, due to incompatibilities with Firefox and Safari.f5731d7c0ca
- Improve
the performance of the tooltip trigger's ref setter function by ensuring the useCallback
only
regenerates a new reference when absolutely needed (rather than on every render).fd6bb9c9184
- Delete
version.json56b444b56a8
- Fix a
bug where text descenders were cut off at high zoom levels on Windows4ae083a7e66
- Use
@af/accessibility-testing
for default jest-axe config and jest-axe import in accessibility
testing.599bfe90ee3
- Internal
change to use shape tokens. There is no expected visual change.9d00501a414
- Ensure
legacy types are published for TS 4.5-4.841fae2c6f68
- Upgrade
Typescript from 4.5.5
to 4.9.5
56507598609
- Skip
minor dependency bump4ba10567310
- Internal
changes.03114fe5942
- [ux]
Ensures tooltips are read correctly on screen readers.6cb57eb428d
- Update
examples for Tooltip to use render props API to aid in eventual deprecation of wrapping children.18aeca8c199
- Internal
change to update token references. There is no expected behaviour or visual change.4ee60bafc6d
-
ED-16603: Remove tooltips from VR tests and make them opt in. To opt-in, add allowedSideEffects
when loading the page.4fd77eaf22b
- Align
TriggerProps with the actual output, and make data-testid explicit9827dcb82b8
- No-op
change to introduce spacing tokens to design system components.15f0ad7aaa3
- Updates
@emotion/core
to @emotion/react
; v10 to v11. There is no expected behavior change.8cc2f888c83
- Upgrade
Typescript from 4.3.5
to 4.5.5
8d4228767b0
- Upgrade
Typescript from 4.2.4
to 4.3.5
.338ba1a1500
- [ux]
Improves accuracy of Tooltip placement relative to the mouse when using position="mouse"
13a202fde6b
- Fixes a
bug where undefined test IDs were being added to Tooltip wrappers when no test ID was set45ebe7af434
- Moved to
using declarative entrypoints internally. Public API is unchanged.4efc76f8a72
- [ux]
Fixes a bug where tooltip entrance and exit direction animations were not working since version
12.1.7, after upgrading react-popper
.
This involved adding a wrapper <div>
around the tooltip to separate the positioning and
animation styles. The wrapper can be identified in tests using testId
with the pattern
{testId}--wrapper
.
Updated dependencies
8a5bdb3c844
-
Upgrading internal dependency (bind-event-listener) for improved internal types2e7bbdfd813
-
Upgrading internal dependency 'bind-event-listener' to 2.1.0 for improved typescb2392f6d33
- Upgrade
to TypeScript 4.2.4d0eed99c3e3
- ED-14264
Moved styles to emotion css6007e4f9a97
- Internal
styling has been refactored in preparation for @compiled/react19d72473dfb
- The
no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when
auto-fixing by correctly formatting token ids.f460cc7c411
- Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.cf853e39278
- Added
the render props support to the Tooltip component. Linked the tooltip text to the trigger using
aria-describedby for users with assistive technologies.45e06ed2420
-
Instrumented Tooltip with the new theming package, @atlaskit/tokens
. Tokens will be visible only
in applications configured to use the new Tokens API (currently in alpha). These changes are
intended to be interoperable with the legacy theme implementation. Legacy dark mode users should
expect no visual or breaking changes.378d1cef00f
- Bump
@atlaskit/theme
to version ^11.3.0
.152d0955271
-
Impelemented hiding the tooltip when escape presseda5d452bcb30
- [ux]
Tooltip now stays visible when hovering over it, previously it would disappear. This is one of the
many accessibility improvements we're rolling out to the Atlassian Design System.d6f7ff383cf
- Updates
to development dependency storybook-addon-performance
#9083
8386261266c
- Tooltip
content
now supports an optional render props API. This API provides an update
function which
can be called to manually recalculate the position of the tooltip.
This update
function is useful if you are changing the content of the tooltip while it is being
displayed.
1bcfae1edb9
- Add role
presentation to tooltip.7116601e1b2
- Internal
typing refactored to be readable by extract-react-types.79c23df6340
- Use
injected package name and version for analytics instead of version.json.d3265f19be
- Transpile
packages using babel rather than tsc#5693
d36905cfe9
- Fixed
incorrect function signature for onShow and onHide props, and added improved typing for these
props.
If you migrated analyticsEvent to the second argument to mitigate this bug, you will need to update your code.
Updated dependencies
4a9b4d8808
- DS-7523
Extends Tooltip to accept strategy as prop5f58283e1f
- Export
types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules
compiler option. This requires version 3.8 of Typescript, read more about how we handle Typescript
versions here: https://atlaskit.atlassian.com/get-started Also add typescript
to
devDependencies
to denote version that the package was built with.18f7ccbbfc
- Fixing
tooltip prop documentation#4424
83586f015e
- Tooltip
has been refactored to improve performance and be compliant with the lite-mode specification.
react-transition-group
in favor of @atlaskit/motion
to reduce bundle sizereact-node-resolver
because of its use of React.findDOMNode
which has been marked as
deprecated by the React team (more below...)styled-components
v3 with @emotion/core
to improve runtime and bundle-sizetag
prop then your component will need to expose a ref
prop (ref: React.Ref<HTMLElement>
).Important to note:
Only a single element can be supplied to Tooltip as children, no plain text etc. (this has not changed from previous version).
f32a1f0ebf
- update
@atlaskit/tooltip position prop to support Placement type.3f7751f72c
- - Fixed
issue where tooltip would not hide in some circumstances#3885
6c525a8229
- Upgraded
to TypeScript 3.9.6 and tslib to 2.0.0
Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade to prevent duplicates of tslib being bundled.
954cc87b62
- The readme
and package information has been updated to point to the new design system website.db053b24d8
- Update all
the theme imports to be tree-shakable87f4720f27
- Officially
dropping IE11 support, from this version onwards there are no warranties of the package working in
IE11. For more information see:
https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/3953454a9514fcf
- Build and
supporting files will no longer be published to npm4560b65a4f
- upgrade
react-transition-group to latest[patch]3940bd71f1:
Change imports to comply with Atlassian conventions- Updated dependencies cf8577f5d6:
Updated dependencies 6b8e60827e:
[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[patch]4a223473c5:
Removes babel/runtime from dependencies. Users should see a smaller bundlesize as a result- Updated dependencies 28f8f0e089:
Updated dependencies 82747f2922:
[minor]24865cfaff:
Tooltip will now be shown when the target element receives focus and hidden when the target element loses focus.
[patch]24865cfaff:
Updates react-popper dependency to a safe version.- Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
[patch]d222c2b987:
Theme has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided.
** getTokens props changes ** When defining the value function passed into a ThemeProvider, the
getTokens parameter cannot be called without props; if no props are provided an empty object {}
must be passed in:
<CustomTheme.Provider
value={t => ({ ...t(), backgroundColor: '#333'})}
>
becomes:
<CustomTheme.Provider
value={t => ({ ...t({}), backgroundColor: '#333'})}
>
** Color palette changes ** Color palettes have been moved into their own file. Users will need to update imports from this:
import { colors } from '@atlaskit/theme';
colors.colorPalette('8');
to this:
import { colorPalette } from '@atlaskit/theme';
colorPalette.colorPalette('8');
or for multi entry-point users:
import * as colors from '@atlaskit/theme/colors';
colors.colorPalette('8');
to this:
import * as colorPalettes from '@atlaskit/theme/color-palette';
colorPalettes.colorPalette('8');
[patch]f86839ca4e:
@atlaskit/portal had an issue in IE11 and this is fixed in 3.1.2
[patch]35d2229b2a:
Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.
[minor]ca1d742875:
Adding an optional prop testId
that will set the attribute value data-testid
. It will help
products to write better integration and end to end tests.
[patch]a2d0043716:
Updated version of analytics-next to fix potential incompatibilities with TS 3.6
[patch]097b696613:
Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports
[patch]ecca4d1dbb:
Upgraded Typescript to 3.3.x
[patch]708028db86:
Change all the imports to theme in Core to use multi entry points
[patch]b8e9a6c5a3:
Children has now been added to Tooltip's prop-types
[patch]de35ce8c67:
Updates component maintainers
[patch]926b43142b:
Analytics-next has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No behavioural changes.
Breaking changes
withAnalyticsForSumTypeProps
alias has been removed, please use withAnalyticsEvents
AnalyticsContextWrappedComp
alias has been removed, please use withAnalyticsContext
Breaking changes to TypeScript annotations
withAnalyticsEvents
now infers proptypes automatically, consumers no longer need to provide
props as a generic type.withAnalyticsContext
now infers proptypes automatically, consumers no longer need to provide
props as a generic type.WithAnalyticsEventProps
has been renamed to WithAnalyticsEventsProps
to match source
codeCreateUIAnalyticsEventSignature
has been renamed to CreateUIAnalyticsEvent
to match
source codeUIAnalyticsEventHandlerSignature
has been renamed to UIAnalyticsEventHandler
to match
source codeAnalyticsEventsPayload
has been renamed to AnalyticsEventPayload
ObjectType
has been removed, please use Record<string, any>
or [key: string]: any
UIAnalyticsEventInterface
has been removed, please use UIAnalyticsEvent
AnalyticsEventInterface
has been removed, please use AnalyticsEvent
CreateAndFireEventFunction
removed and should now be inferred by TypeScriptAnalyticsEventUpdater
removed and should now be inferred by TypeScript[patch]688f2957ca:
Fixes various TypeScript errors which were previously failing silently
[patch]f34776be97:
Type definition files are now referenced in package.json
[patch]9f8ab1084b:
Consume analytics-next ts type definitions as an ambient declaration.
[patch]d0db01b410:
TypeScript users of withAnalyticsEvents and withAnalyticsContext are now required to provide props as a generic type. This is so that TypeScript can correctly calculate the props and defaultProps of the returned component.
Before:
withAnalyticsEvents()(Button) as ComponentClass<Props>;
After:
withAnalyticsEvents<Props>()(Button);
[patch]29a1f158c1:
Use default react import in typescript files.
[patch]93bcf314c6:
Added missing tslib dep
[major]67f06f58dd:
[patch]b0ef06c685:
[major]7c17b35107:
[major]76299208e6:
As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only
distribute esm. This means all distributed code will be transpiled, but will still contain
import
and export
declarations.
The major reason for doing this is to allow us to support multiple entry points in packages, e.g:
import colors from `@atlaskit/theme/colors`;
Previously this was sort of possible for consumers by doing something like:
import colors from `@atlaskit/theme/dist/esm/colors`;
This has a couple of issues. 1, it treats the file system as API making internal refactors harder, we have to worry about how consumers might be using things that aren't actually supposed to be used. 2. We are unable to do this internally in @atlaskit packages. This leads to lots of packages bundling all of theme, just to use a single color, especially in situations where tree shaking fails.
To support being able to use multiple entrypoints internally, we unfortunately cannot have multiple distributions as they would need to have very different imports from of their own internal dependencies.
ES Modules are widely supported by all modern bundlers and can be worked around in node environments.
We may choose to revisit this solution in the future if we find any unintended condequences, but we see this as a pretty sane path forward which should lead to some major bundle size decreases, saner API's and simpler package architecture.
Please reach out to #fabric-build (if in Atlassian) or create an issue in Design System Support (for external) if you have any questions or queries about this.
[patch]c4edb3ab4d:
[patch]8f179c4:
[patch]3b03f52:
[patch]7f1ff28:
Fixes error when Tooltip attempts to setState on an unmounted component
onMouseOver
function in tooltip with onTooltipShow
, and onMouseOut
function with onTooltipHide
to give consumers more useful methods.
e6b1985