feat(tooltip): Add message property for plain text tooltip content

Author: Zneeky

src/components/tooltip/tooltip.ts

@@ -190,6 +190,14 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
     return this._hideDelay;
   }
 
+  /**
+   * Specifies a plain text as tooltip content.
+   *
+   * @attr
+   */
+  @property({ type: String })
+  public message = '';
+
   constructor() {
     super();
 
@@ -348,7 +356,7 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
         shift
       >
         <div ${ref(this._containerRef)} part="base">
-          <slot></slot>
+          ${this.message ? html`${this.message}` : html`<slot></slot>`}
           ${this.disableArrow ? nothing : html`<div id="arrow"></div>`}
         </div>
       </igc-popover>

stories/tooltip.stories.ts

@@ -107,13 +107,20 @@ const metadata: Meta<IgcTooltipComponent> = {
         'Specifies the number of milliseconds that should pass before hiding the tooltip.',
       control: 'number',
     },
+    message: {
+      type: 'string',
+      description: 'Specifies a plain text as tooltip content.',
+      control: 'text',
+      table: { defaultValue: { summary: '' } },
+    },
   },
   args: {
     open: false,
     disableArrow: false,
     inline: false,
     offset: 4,
     placement: 'top',
+    message: '',
   },
 };
 
@@ -158,6 +165,8 @@ interface IgcTooltipArgs {
   showDelay: number;
   /** Specifies the number of milliseconds that should pass before hiding the tooltip. */
   hideDelay: number;
+  /** Specifies a plain text as tooltip content. */
+  message: string;
 }
 type Story = StoryObj<IgcTooltipArgs>;
 
@@ -303,6 +312,7 @@ export const Toggle: Story = {
         placement="bottom"
         show-delay="500"
         hide-delay="500"
+        message="Simple tooltip content"
       >
         This tooltip toggles on button click!
       </igc-tooltip>