Skip to main content
The CometChatReactionInfo component displays a tooltip showing the names of users who reacted with a specific emoji on a message. It fetches reaction details from the CometChat SDK and formats the display with “You” for the logged-in user and an “and X others” suffix when there are more reactors than the fetch limit.

​
Overview

The Reaction Info component provides a concise reactor summary:
  • User Names: Fetches and displays names of users who reacted with the specified emoji
  • Current User Highlighting: Replaces the logged-in user’s name with localized “You” text, placed first
  • Overflow Text: Shows “and X others” when total reactions exceed the fetched count
  • Loading States: Manages loading, loaded, and error states during data fetching
  • Auto-Refresh: Re-fetches reaction info when the message or reaction input changes
Live Preview — default reaction info preview. Open in Storybook ↗

​
Basic Usage

​
Simple Reaction Info Tooltip

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatReactionInfoComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-reaction-info-demo',
  standalone: true,
  imports: [CometChatReactionInfoComponent],
  template: `
    <cometchat-reaction-info
      [message]="message"
      [reaction]="'👍'">
    </cometchat-reaction-info>
  `
})
export class ReactionInfoDemoComponent {
  message!: CometChat.BaseMessage;
}

​
Used with Reactions Component

The Reaction Info component is typically rendered inside a popover that appears when hovering over a reaction pill: 
import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatReactionsComponent,
  CometChatReactionInfoComponent,
  CometChatPopoverComponent
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-reaction-with-info',
  standalone: true,
  imports: [
    CometChatReactionsComponent,
    CometChatReactionInfoComponent,
    CometChatPopoverComponent
  ],
  template: `
    <cometchat-reactions
      [message]="message"
      (reactionClick)="onReactionClick($event)">
    </cometchat-reactions>
  `
})
export class ReactionWithInfoComponent {
  message!: CometChat.BaseMessage;

  onReactionClick(event: { reaction: CometChat.ReactionCount; message: CometChat.BaseMessage }): void {
    console.log('Reaction toggled:', event.reaction.getReaction());
  }
}

​
Properties

PropertyTypeDefaultDescription
messageCometChat.BaseMessagerequiredThe message to show reaction info for
reactionstringrequiredThe emoji character to show info for

​
Events

This component does not emit any events.

​
Customization

​
CSS Variables

The Reaction Info component uses BEM-style CSS classes: 
/* Reaction info container */
.cometchat-reaction-info {
  padding: var(--cometchat-spacing-1) var(--cometchat-spacing-2);
  background: var(--cometchat-background-color-04);
  border-radius: var(--cometchat-radius-2);
}

/* Reactor names text */
.cometchat-reaction-info__names {
  font: var(--cometchat-font-caption1-regular);
  color: var(--cometchat-static-white);
}

/* Loading state */
.cometchat-reaction-info--loading {
  opacity: 0.6;
}

​
Theming

The component adapts to light and dark themes through CSS variables: 
:root {
  --cometchat-background-color-04: #333333;
  --cometchat-static-white: #FFFFFF;
}

[data-theme="dark"] {
  --cometchat-background-color-04: #2A2A2A;
  --cometchat-static-white: #FFFFFF;
}

​
Accessibility

​
Screen Reader Support

  • The tooltip content is accessible to screen readers via the parent popover’s ARIA attributes
  • User names are presented in a readable format with “You” for the current user

​
Keyboard Navigation

The Reaction Info component is a passive tooltip — keyboard interaction is handled by the parent reaction pill or popover that triggers it.