Salesforce Docs Portal

Tooltip Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains a Tooltip LWC ReadMe for each Vlocity release.

Managed Package app icon This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

Vlocity Insurance and Health Summer '20

The Tooltip Lightning Web Component displays a small amount of contextual information about an element on the screen when a user hovers or focuses on an icon next to the element. Information can either be plain text or custom markup (HTML).

Available c-tooltip Attributes

Attribute

Value

Type

Required

Description

arrowposition

top, bottom, left, right (See description for more options). (Default: bottom-left)

string

  

Sets the arrow (nubbin) position. There are three ways to provide arrow position: top, top-left, or top-left-corner.

button-icon

true, false (Default: true)

string

  

Creates a button Icon type tooltip.

content

  

string

yes

Adds the text to display in the tooltip. If custom markup exists, content text is ignored. See Example Custom Markup on this page.

extraclass

  

string

  

Adds a class to the table element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'. This attribute can also override classes specified by arrowposition.

icon-name

(Format: standard:arrow) (Default: utility:info)

string

  

Sets the icon for the tooltip. See SLDS icons.

icon-size

xx-small, x-small, small, medium, large. (Default: xx-small)

string

  

Sets the size of the icon.

icon-url

  

string

  

Overrides the default URL of the svg resource.

icon-variant

inverse, warning, error, default (Default: default)

string

  

To change the appearance of a utility icon, set this attribute. Use the 'inverse' variant to implement a white fill on dark backgrounds for utility icons.

theme

slds, nds (Default: slds)

    

Sets the theme for the tooltip component.

Example c-tooltip Component

<c-tooltip
  content="This is a test message"
  arrowposition="top-right"
  icon-name="utility:add"
></c-tooltip>

Example Custom Markup

<c-tooltip
  theme="{theme}"
  icon-url="{iconUrl}"
  content="This is a demo help text"
  arrowposition="top-right"
>
  <div>
    <h1>This is Custom markup</h1>
    <span>You can put HTML inside the tooltip</span>
    <c-button variant="brand" label="This is a Button"></c-button>
  </div>
</c-tooltip>

Vlocity Insurance and Health Spring '20

The Tooltip Lightning Web Component displays a small amount of contextual information about an element on the screen when a user hovers or focuses on an icon next to the element. Information can either be plain text or custom markup (HTML).

Available c-tooltip Attributes

Attribute

Value

Type

Required

Description

arrowposition

top, bottom, left, right (See description for more options). (Default: bottom-left)

string

  

Sets the arrow (nubbin) position. There are three ways to provide arrow position: top, top-left, or top-left-corner.

content

  

string

yes

Adds the text to display in the tooltip. If custom markup exists, content text is ignored. See Example Custom Markup on this page.

extraclass

  

string

  

Adds a class to the table element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'. This attribute can also override classes specified by arrowposition.

icon-name

(Format: standard:arrow) (Default: utility:info)

string

  

Sets the icon for the tooltip. See SLDS icons.

icon-size

xx-small, x-small, small, medium, large. (Default: xx-small)

string

  

Sets the size of the icon.

icon-url

  

string

  

Overrides the default URL of the svg resource.

icon-variant

inverse, warning, error, default (Default: default)

string

  

To change the appearance of a utility icon, set this attribute. Use the 'inverse' variant to implement a white fill on dark backgrounds for utility icons.

theme

slds, nds (Default: slds)

    

Sets the theme for the tooltip component.

Example c-tooltip Component

<c-tooltip
  content="This is a test message"
  arrowposition="top-right"
  icon-name="utility:add"
></c-tooltip>

Example Custom Markup

<c-tooltip
  theme="{theme}"
  icon-url="{iconUrl}"
  content="This is a demo helptextsssss"
  arrowposition="top-right"
>
  <div>
    <h1>This is Custom markup</h1>
    <span>You can put HTML inside the tooltip</span>
    <c-button variant="brand" label="This is a Button"></c-button>
  </div>
</c-tooltip>

Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20

The Tooltip Lightning Web Component displays an icon with a popover containing a small amount of text describing an element on screen. The popover displays on hover or on focus of the icon.

Available c-tooltip Attributes

Attribute

Value

Type

Required

Description

arrowposition

top, bottom, left, right (See description for more options). (Default: bottom-left)

string

  

Sets the arrow (nubbin) position. There are three ways to provide arrow position: top, top-left, or top-left-corner.

content

  

string

yes

Adds the text to display in the tooltip.

extraclass

  

string

  

Adds a class to the table element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'. This attribute can also override classes specified by arrowposition.

icon-name

(Format: standard:arrow) (Default: utility:info)

string

  

Sets the icon for the tooltip. See SLDS icons.

icon-size

xx-small, x-small, small, medium, large. (Default: xx-small)

string

  

Sets the size of the icon.

icon-url

  

string

  

Overrides the default URL of the svg resource.

icon-variant

inverse, warning, error, default (Default: default)

string

  

To change the appearance of a utility icon, set this attribute. Use the 'inverse' variant to implement a white fill on dark backgrounds for utility icons.

theme

slds, nds (Default: slds)

    

Sets the theme for the tooltip component.

Example c-tooltip Component

<c-tooltip
  content="This is a test message"
  arrowposition="top-right"
  icon-name="utility:add"
></c-tooltip>

Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19

The Tooltip Lightning Web Component displays an icon with a popover containing a small amount of text describing an element on screen. The popover displays on hover or on focus of the icon.

Available c-tooltip Attributes

Attribute

Value

Type

Required

Description

arrowposition

top, bottom, left, right (See description for more options). (Default: bottom-left)

string

  

Sets the arrow (nubbin) position. There are three ways to provide arrow position: top, top-left, or top-left-corner.

content

  

string

yes

Adds the text to display in the tooltip.

extraclass

  

string

  

Adds a class to the table element. To add multiple classes, use a space to separate each class, such as `classone classtwo'. This attribute can also override classes specified by arrowposition.

icon-name

(Format: standard:arrow) (Default: utility:info)

string

  

Sets the icon for the tooltip. See SLDS icons.

icon-size

xx-small, x-small, small, medium, large. (Default: xx-small)

string

  

Sets the size of the icon.

icon-url

  

string

  

Overrides the default URL of the svg resource.

icon-variant

inverse, warning, error, default (Default: default)

string

  

To change the appearance of a utility icon, set this attribute. Use the `inverse' variant to implement a white fill on dark backgrounds for utility icons.

theme

slds, nds (Default: slds)

    

Sets the theme for the tooltip component.

Example c-tooltip Component

<c-tooltip
  content="This is a test message"
  arrowposition="top-right"
  icon-name="utility:add"
></c-tooltip>