docs(tooltip): use Button instead of Information icons in stories

packages/react/src/components/FormLabel/FormLabel.stories.js

@@ -21,20 +21,10 @@ export default {
 
 export const Default = () => <FormLabel>Form label</FormLabel>;
 
-export const WithTooltip = (controls) => {
+export const WithToggletip = (controls) => {
   const { align } = controls;
   return (
     <>
-      <div className="form-wrapper">
-        <FormLabel>Form label with Tooltip</FormLabel>
-        <Tooltip
-          align="bottom"
-          label="This can be used to provide more information about a field.">
-          <button className="cds--tooltip__trigger" type="button">
-            <Information />
-          </button>
-        </Tooltip>
-      </div>
       <div className="form-wrapper">
         <FormLabel>Form label with Toggletip</FormLabel>
         <Toggletip align={align}>

packages/react/src/components/Tooltip/Tooltip.stories.js

@@ -7,9 +7,9 @@
 
 import './story.scss';
 
-import { Information } from '@carbon/icons-react';
 import React, { useRef, useEffect } from 'react';
 import { Tooltip } from './';
+import Button from './../Button';
 import mdx from './Tooltip.mdx';
 
 export default {
@@ -55,19 +55,15 @@ export const Default = () => {
     'Occasionally, services are updated in a specified time window to ensure no down time for customers.';
   return (
     <Tooltip align="bottom" label={label}>
-      <button className="sb-tooltip-trigger" type="button">
-        <Information />
-      </button>
+      <Button className="sb-tooltip-trigger">This button has a tooltip</Button>
     </Tooltip>
   );
 };
 
 export const Alignment = () => {
   return (
     <Tooltip label="Tooltip alignment" align="bottom-left">
-      <button className="sb-tooltip-trigger" type="button">
-        <Information />
-      </button>
+      <Button className="sb-tooltip-trigger">This button has a tooltip</Button>
     </Tooltip>
   );
 };
@@ -89,9 +85,9 @@ export const ExperimentalAutoAlign = () => {
           left: '2500px',
         }}>
         <Tooltip label={tooltipLabel} align="top" autoAlign>
-          <button className="sb-tooltip-trigger" type="button" ref={ref}>
-            <Information />
-          </button>
+          <Button className="sb-tooltip-trigger" ref={ref}>
+            This button has a tooltip
+          </Button>
         </Tooltip>
       </div>
     </div>
@@ -101,9 +97,7 @@ export const ExperimentalAutoAlign = () => {
 export const Duration = () => {
   return (
     <Tooltip label="Label one" enterDelayMs={0} leaveDelayMs={300}>
-      <button className="sb-tooltip-trigger" type="button">
-        <Information />
-      </button>
+      <Button className="sb-tooltip-trigger">This button has a tooltip</Button>
     </Tooltip>
   );
 };
@@ -128,7 +122,7 @@ const PlaygroundStory = (props) => {
       leaveDelayMs={leaveDelayMs}
       closeOnActivation={closeOnActivation}>
       <button className="sb-tooltip-trigger" type="button">
-        <Information />
+        <SquareOutline />
       </button>
     </Tooltip>
   );