--- schema_version: "1" id: 29ba59a83aba63a9e656516f7b865b469cc8c91864e4b92ecb06d849caf43ab8 title: Tooltip Lightning Web Component ReadMe (Managed Package) collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_tooltip_lightning_web_component_readme.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_tooltip_lightning_web_component_readme.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 8703fe25e39f1fcde534a06bfddbc9645d39e855a0c0c3ad5c3b6f7eab4143df description: For the managed package runtime, this page contains a Tooltip LWC ReadMe for each Vlocity release. products: - Omnistudio release: "264" --- # 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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US). ## 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 ``` ``` ## Example Custom Markup ```

This is Custom markup

You can put HTML inside the 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 ``` ``` ## Example Custom Markup ```

This is Custom markup

You can put HTML inside the 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 ``` ``` ## 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 ``` ```