diff --git a/src/pages/components/tag/images/tag-style-interactive-color-selectable.png b/src/pages/components/tag/images/tag-style-interactive-color-selectable.png
index 6bb1535f66c..2da34e56cdf 100644
Binary files a/src/pages/components/tag/images/tag-style-interactive-color-selectable.png and b/src/pages/components/tag/images/tag-style-interactive-color-selectable.png differ
diff --git a/src/pages/components/tag/images/tag-style-structure-operational-examples.png b/src/pages/components/tag/images/tag-style-structure-operational-examples.png
deleted file mode 100644
index 422b5272c09..00000000000
Binary files a/src/pages/components/tag/images/tag-style-structure-operational-examples.png and /dev/null differ
diff --git a/src/pages/components/tag/images/tag-style-structure-operational-popover.png b/src/pages/components/tag/images/tag-style-structure-operational-popover.png
index 31bae09bd58..09f1d282f4d 100644
Binary files a/src/pages/components/tag/images/tag-style-structure-operational-popover.png and b/src/pages/components/tag/images/tag-style-structure-operational-popover.png differ
diff --git a/src/pages/components/tag/images/tag-style-structure-operational-tooltip-toggletip.png b/src/pages/components/tag/images/tag-style-structure-operational-tooltip-toggletip.png
deleted file mode 100644
index 6a5622c151b..00000000000
Binary files a/src/pages/components/tag/images/tag-style-structure-operational-tooltip-toggletip.png and /dev/null differ
diff --git a/src/pages/components/tag/images/tag-style-structure-operational-tooltip.png b/src/pages/components/tag/images/tag-style-structure-operational-tooltip.png
new file mode 100644
index 00000000000..33fb9dc4139
Binary files /dev/null and b/src/pages/components/tag/images/tag-style-structure-operational-tooltip.png differ
diff --git a/src/pages/components/tag/style.mdx b/src/pages/components/tag/style.mdx
index cc664e9b78c..f9e9afd6a14 100755
--- a/src/pages/components/tag/style.mdx
+++ b/src/pages/components/tag/style.mdx
@@ -149,6 +149,8 @@ tokens.
| | | | Background | background-color | `$layer` \* |
| Selectable tag | | Hover | Background | background-color | `$layer-hover` \* |
| | | Focus | Border | border | `$focus` |
+| | | Selected | Text | text-color | `$text-inverse` |
+| | | | Background | background-color | `$background-inverse` |
| | | Disabled | Text | text-color | `$text-disabled` |
| | | | Border | border | `$border-disabled` |
| | | | Background | background-color | `$layer` \* |
@@ -274,23 +276,23 @@ There are three fixed heights of tags—large (32px), medium (24px), and small
-
+
- Structure and spacing measurements of operational tag tooltip and toggletip |
- px / rem.
+ Structure and spacing measurements of operational tag tooltip | px / rem.
-
+
- Structure and spacing measurements of operational tag popover | px / rem.
+ Structure and spacing measurements of operational tag popover styles | px /
+ rem.
## Size
diff --git a/src/pages/components/tag/usage.mdx b/src/pages/components/tag/usage.mdx
index b5199955a75..c2b1985a56f 100755
--- a/src/pages/components/tag/usage.mdx
+++ b/src/pages/components/tag/usage.mdx
@@ -114,8 +114,8 @@ to differentiate between them.
- Use in a chat flow to make decisions and advance the chat
- Use for creating user-generated custom labeling and use when needing to remove
created labels
-- Use to view an overflow of multiple tags, like in a toggletip, popover, modal,
- or detail view
+- Use to view an overflow of multiple tags, like in a popover, modal, or detail
+ view
### When not to use
@@ -131,7 +131,7 @@ to differentiate between them.
| [Read-only tag](#read-only-tag) | Tags that have no interactive functionality and are commonly used for categorizing and labeling. |
| [Dismissible tag](#dismissible-tag) | Tags that can be dismissed, closed, or removed. These tags are typically used for filtering and creating user-generated content. |
| [Selectable tag](#selectable-tag) | Tags that can be selected or deselected and are frequently used as selections that filter data in the context of a page. They also can be used in chat flows to make decisions to advance the chat. |
-| [Operational tag](#operational-tag) | When interacted with, these tags can disclose additional or overflow tags, like in a toggletip, popover, modal, or breadcrumb detail view. |
+| [Operational tag](#operational-tag) | When interacted with, these tags can disclose additional or overflow tags, like in a popover, modal, or breadcrumb detail view. |
## Formatting
@@ -318,7 +318,7 @@ selected state, clicking anywhere on the tag again will deselect it.
Operational tags: Receive a background color change and mouse pointer on hover.
Clicking anywhere on the tag will disclose a way of viewing more related tags in
-either a toggletip, popover, modal, or breadcrumb view.
+either a popover, modal, or breadcrumb view.
#### Keyboard
@@ -336,7 +336,7 @@ in the group.
Operational tags: The container receives focus by pressing the `Tab` key.
Pressing the `Enter` or `Space` keys will disclose additional related tags, in a
-toggletip, popover, modal, or breadcrumb view.
+popover, modal, or breadcrumb view.
### Clickable areas
@@ -418,10 +418,11 @@ used in a form containing only tags as the selection method, in a chat to make
decisions and forward the chat, and can be used as selections to filter content
on a page or within a component.
-In some cases, selectable tags can be used as an alternative to traditional form
+In some cases, selectable tags can be an alternative to traditional form
components when the entire form consistently uses tags as its form selection
-style. Selectable tags should always remain in high contrast to ensure a
-noticeable difference between selected and unselected tags.
+style. Selectable tags can be used for multi-selection or single-selection use
+cases. These tags should always remain in high contrast to ensure a noticeable
+difference between selected and unselected tags.
@@ -458,9 +459,9 @@ component for your use case, like a
## Operational tag
Operational tags enable the user to see a more comprehensive view of all tags
-disclosed in a toggletip, popover, or breadcrumb detail view. Do not use tags as
-links that direct you to an entirely different page or launch you from a current
-experience to a separate tab.
+disclosed in a popover, or breadcrumb detail view. Do not use tags as links that
+direct you to an entirely different page or launch you from a current experience
+to a separate tab.