diff --git a/packages/react/src/components/Tooltip/next/DefinitionTooltip.js b/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
new file mode 100644
index 000000000000..49bea88f49ae
--- /dev/null
+++ b/packages/react/src/components/Tooltip/next/DefinitionTooltip.js
@@ -0,0 +1,70 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { Popover, PopoverContent } from '../../Popover';
+import { match, keys } from '../../../internal/keyboard';
+import { usePrefix } from '../../../internal/usePrefix';
+import { useId } from '../../../internal/useId';
+
+function DefinitionTooltip({ children, definition, ...rest }) {
+ const [isOpen, setOpen] = useState(false);
+ const prefix = usePrefix();
+ const id = useId();
+
+ function handleKeyDown(event) {
+ if (isOpen && match(event, keys.Escape)) {
+ event.stopPropagation();
+ setOpen(false);
+ }
+ }
+
+ return (
+ {
+ setOpen(false);
+ }}
+ open={isOpen}>
+
+
+ {definition}
+
+
+ );
+}
+
+DefinitionTooltip.propTypes = {
+ /**
+ * Provide the content being defined
+ */
+ children: PropTypes.node,
+
+ /**
+ * Provide the content being defined
+ */
+ definition: PropTypes.string.isRequired,
+};
+
+export { DefinitionTooltip };
diff --git a/packages/react/src/components/Tooltip/next/Tooltip.stories.js b/packages/react/src/components/Tooltip/next/Tooltip.stories.js
index ff23db16a297..e0abfcda687d 100644
--- a/packages/react/src/components/Tooltip/next/Tooltip.stories.js
+++ b/packages/react/src/components/Tooltip/next/Tooltip.stories.js
@@ -10,6 +10,7 @@ import './story.scss';
import { Checkbox16 } from '@carbon/icons-react';
import React from 'react';
import { Tooltip } from '../next';
+import { DefinitionTooltip } from './DefinitionTooltip.js';
export default {
title: 'Experimental/unstable_Tooltip',
@@ -68,6 +69,22 @@ export const Duration = () => {
);
};
+export const Definition = () => {
+ const definition =
+ 'Uniform Resource Locator; the address of a resource (such as a document or website) on the Internet.';
+ return (
+
+
+ Custom domains direct requests for your apps in this Cloud Foundry
+ organization to a{' '}
+ URL that
+ you own. A custom domain can be a shared domain, a shared subdomain, or
+ a shared domain and host.
+