Working with the KendoReact Popup Component

Learn how to create, position and customize popups in your React app with the KendoReact Popup component.

Popups are UI elements that display content in a floating layer above the main application interface. They’re commonly used for tooltips, dropdown menus, context menus and other scenarios where you need to show additional information without disrupting the user’s workflow.

The React Popup component from the Progress KendoReact UI library provides a flexible solution for implementing these floating elements in React applications.

In this article, we’ll explore how to create, position and customize popups using the KendoReact Popup component.

The KendoReact Popup component is part of KendoReact Free, which means you can use it in your projects without any license or registration requirements!

The KendoReact Popup Component

The React Popup component, part of the KendoReact UI library, simplifies the process of creating floating content that can be anchored to specific elements or positioned at absolute coordinates. It handles positioning logic, boundary detection and animations out of the box.

The KendoReact Popup component is distributed through the @progress/kendo-react-popup npm package and can be imported directly:

import { Popup } from '@progress/kendo-react-popup';

Here’s a basic example of how we can use the Popup component:

import * as React from 'react';
import { Popup } from '@progress/kendo-react-popup';
import { Button } from '@progress/kendo-react-buttons';

const App = () => {
  const anchor = React.useRef(null);
  const [show, setShow] = React.useState(false);

  const onClick = () => {
    setShow(!show);
  };

  return (
    <div>
      <Button type="button" onClick={onClick} ref={anchor}>
        {show ? 'Hide' : 'Show'}
      </Button>
      <Popup anchor={anchor.current && anchor.current.element} show={show}>
        This is Popup Content!
      </Popup>
    </div>
  );
};

export default App;

The example above creates a button (with the help of the KendoReact Button component) that toggles a popup when clicked. The popup is anchored to the button element using a React ref, and its visibility is controlled by the show state variable.

The Popup component’s visibility is controlled through the show prop. When show is set to true, the popup appears; when it’s false, the popup is hidden. This declarative approach makes it easy to integrate popups into our application’s state management:

const [show, setShow] = React.useState(false);

// Toggle popup visibility
const togglePopup = () => {
  setShow(!show);
};

By managing the show state, we can create popups that respond to various user interactions, such as clicking a button (like we’ve seen above), hovering over an element or focusing on an input field.

Positioning

One of the more useful features of the KendoReact Popup is its flexible positioning system. The component can be positioned in two main ways: anchored to an element or placed at absolute coordinates. We’ve already seen an example of how the popup can be anchored to an element, so for scenarios where we need to position the popup at specific coordinates, we can use the offset prop:

import { Offset } from '@progress/kendo-react-popup';

const offset: Offset = { left: 150, top: 50 };

<Popup offset={offset} show={true}>
  Popup content at absolute position
</Popup>

This example positions the popup 150 pixels from the left and 50 pixels from the top of the document.

Alignment

The Popup component treats both the anchor and the popup itself as rectangular elements with nine pivot points (corners, edges and center). We can precisely control how these elements align using the anchorAlign and popupAlign props:

const anchorAlign = { horizontal: 'right', vertical: 'bottom' };
const popupAlign = { horizontal: 'left', vertical: 'top' };

<Popup
  anchor={anchor.current}
  anchorAlign={anchorAlign}
  popupAlign={popupAlign}
  show={show}
>
  Precisely aligned popup!
</Popup>

This configuration aligns the popup’s top-left corner to the anchor’s bottom-right corner.

Animation

The Popup component supports animations for opening and closing transitions. We can enable animations and customize their duration using the animate prop:

<Popup
  anchor={anchor.current}
  show={show}
  animate={{
    openDuration: 1000,
    closeDuration: 900
  }}
>
  Animated popup content!
</Popup>

The above example will slowly animate the opening and closing of the popup by a full second and close to a second, respectively.

Styling and Customization

To customize the appearance of the Popup component, we can apply custom CSS classes using the popupClass prop:

<Popup
  anchor={anchor.current}
  show={show}
  popupClass="custom-popup"
>
  Styled popup content
</Popup>

Then define our custom styles:

.custom-popup {
  background-color: #f5f5f5;
  border: 2px solid #0055ff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

This example will now have some custom styling applied to our popup.

A Custom Tooltip System

While KendoReact does provide a dedicated Tooltip component, creating a custom tooltip using the Popup component gives us further control over the styling, behavior and animation properties. This approach is useful when we need tooltips that match specific design requirements or behave differently from the standard KendoReact Tooltip implementation.

Here’s an example of creating a custom Tooltip component with the help of the Popup component:

import * as React from 'react';
import { Popup } from '@progress/kendo-react-popup';

import './styles.css';

const Tooltip = ({ children, content, position = 'top' }) => {
  const [show, setShow] = React.useState(false);
  const anchor = React.useRef(null);

  const getAlignment = (position) => {
    const alignments = {
      top: {
        anchorAlign: { horizontal: 'center', vertical: 'top' },
        popupAlign: { horizontal: 'center', vertical: 'bottom' },
      },
      bottom: {
        anchorAlign: { horizontal: 'center', vertical: 'bottom' },
        popupAlign: { horizontal: 'center', vertical: 'top' },
      },
      left: {
        anchorAlign: { horizontal: 'left', vertical: 'middle' },
        popupAlign: { horizontal: 'right', vertical: 'middle' },
      },
      right: {
        anchorAlign: { horizontal: 'right', vertical: 'middle' },
        popupAlign: { horizontal: 'left', vertical: 'middle' },
      },
    };
    return alignments[position];
  };

  const { anchorAlign, popupAlign } = getAlignment(position);

  return (
    <>
      <b>
        <span
          ref={anchor}
          onMouseEnter={() => setShow(true)}
          onMouseLeave={() => setShow(false)}
          style={{ cursor: 'help' }}
        >
          {children}
        </span>
      </b>
      <Popup
        anchor={anchor.current}
        show={show}
        anchorAlign={anchorAlign}
        popupAlign={popupAlign}
        animate={{ openDuration: 200, closeDuration: 100 }}
        popupClass="tooltip-popup"
      >
        <div className="tooltip-content">{content}</div>
      </Popup>
    </>
  );
};

const App = () => {
  return (
    <div style={{ padding: '50px' }}>
      <p>
        Hover over the{' '}
        <Tooltip content="This is helpful information!" position="top">
          highlighted text
        </Tooltip>{' '}
        to see the tooltip.
      </p>
      <p>
        You can also position tooltips{' '}
        <Tooltip content="I appear on the right!" position="right">
          on the right
        </Tooltip>{' '}
        or{' '}
        <Tooltip content="I appear on the left!" position="left">
          on the left
        </Tooltip>
        .
      </p>
    </div>
  );
};

export default App;

To give the tooltip a distinctive black background appearance, we can add the following CSS:

.tooltip-popup {
  background-color: #000;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  max-width: 250px;
}

.tooltip-popup::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
}

/* Arrow pointing down (for top position) */
.tooltip-popup[data-position='top']::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: #000;
}

The above example demonstrates a reusable tooltip component that accepts content and position props. The tooltip appears when hovering over the wrapped element and supports multiple positioning options.

The getAlignment function maps position names to the appropriate alignment configurations, making it easy to position tooltips. The bold styling on the anchor element provides a visual cue that additional information is available on hover.

Wrap-up

The KendoReact Popup component provides a good foundation for creating floating UI elements in React applications. Its flexible positioning system, animation support and customization options make it suitable for a wide range of use cases, from simple tooltips to complex dropdown menus.

Remember, the Popup component is among the components you can use now (in production!) for free. So go on, try it for yourself!

Get Started with KendoReact Free