DEV Community: Mikhail Petrov

Global react tooltip for clipped text with ellipsis

Mikhail Petrov — Mon, 06 Nov 2023 13:07:16 +0000

Global react tooltip for clipped text with ellipsis

Every frontend developer faces the issue of not having enough space to show all the text in the container.

There is a common CSS solution:

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Looks better, isn’t it? But what is the full text? In many cases it’s important for the user to know the full text. Ok, we can implement a custom component, pass a text as children and track a hover event to show tooltip.

<EllipsisText>
  elit duis ut duis Lorem excepteur exercitation esse velit culpa sit
</EllipsisText>

Now we have a tooltip, but it is shown even when the text is not clipped. The ellipsis appears when offsetWidth of the element is less then scrollWidth.

Great! We have a component which can render a text with ellipsis and show a tooltip.

const TodoItem = ({title}) => (
  <List.Item>
    <Typography.Title level={5}>
      <EllipsisText>
        {title}
      </EllipsisText>
    </Typography.Title>
  </Liet.Item>
);

Every place of the code should be wrapped with component. This component wrapper is extra React node and extra DOM element.

Simple component which renders a list of entity properties

const TodoItem = ({date, description, state, title}) => (
  <Description>
    <Property title='title'>
      <TodoStateIcon state={state} />
      {title}
    </Property>
    <Property title='description'>
      {description}
    </Property>
    <Property title='Date'>
      {date.format('LL LTS')}
    </Property>
    <Property title='state'>
      {formatState(state)}
    </Property>  
  </Description>
);

becomes a mess of multiple wrappers

const TodoItem = ({date, description, state, title}) => (
  <Description>
    <Property title='title'>
      <EllipsisText>
        <TodoStateIcon state={state} />
        {title}
      </EllipsisText>
    </Property>
    <Property title='description'>
      <EllipsisText>
        {description}
      </EllipsisText>
    </Property>
    <Property title='Date'>
      <EllipsisText>
        {date.format('LL LTS')}
      </EllipsisText>
    </Property>
    <Property title='state'>
      <EllipsisText>
        {formatState(state)}
      </EllipsisText>
    </Property>  
  </Description>
);

Global tooltip for text with ellipsis

The suggestion is to use a component which tracks all mouse-hovers on elements with ellipsis and shows a tooltip if the text is clipped. In the we can just add CSS styles with ellipsis for property values without any changes in initial component code.

EllipsisTooltips component

Add a listener to document’s mouseover event to track all child-hover events.

  React.useEffect(() => {
    const mouseOverHandler = (e) => setHoveredElement(e.target);

    document.addEventListener('mouseover', mouseOverHandler);
    return () => {
      document.removeEventListener('mouseover', mouseOverHandler);    
    }
  }, [setHoveredElement]);

Hover event can be raised on child of element with ellipsis, so we need to check target and all its ancestors for being clipped text.

function findBaseTooltipElement(element) {
  const elementStyle = getComputedStyle(element);
  if (isStyleWithEllipsis(elementStyle)) {
    return isOverflowX(element) ? element : null;
  }
  if (isStyleWithClamp(elementStyle)) {
    return isOverflowY(element) ? element : null;
  }
  return element.parentElement ? findBaseTooltipElement(element.parentElement) : null;
}

The component tracks text with ellipsis and text with limited number of lines by using the CSS line-clamp property.

const isStyleWithEllipsis = (style) => style.overflowX === 'hidden' &&
  style.textOverflow === 'ellipsis' &&
  style.whiteSpace === 'nowrap';

const isStyleWithClamp = (style) => style['-webkit-line-clamp'] > 0;

const isOverflowX = (element) => element.offsetWidth < element.scrollWidth;

const isOverflowY = (element) => element.offsetHeight < element.scrollHeight;

setHoveredElement from mouseover listener checks that new element is not a child of already hovered element with a shown tooltip

const setHoveredElement = React.useCallback((hoveredElement) => {
  if (tooltipBaseElement.current && tooltipBaseElement.current !== hoveredElement && !tooltipBaseElement.current.contains(hoveredElement)) {
    defineTooltipBaseElement.cancel();
    tooltipBaseElement.current = null;
    onShowTooltip?.(null);
  }
  defineTooltipBaseElement(hoveredElement);
}, [onShowTooltip, defineTooltipBaseElement]);

and calls defineTooltipBaseElement function which tries to find should the hovered element have a tooltip. The function is debounced to avoid tooltip flickering and delay tooltip show.

const defineTooltipBaseElement = React.useCallback(debounce((element) => {
  const baseElement = findBaseTooltipElement(element);
  tooltipBaseElement.current = baseElement;
  onShowTooltip?.(baseElement);
}, debounceTimeMilliseconds), []);

The full code of component

import React from 'react';
import { debounce } from 'lodash';

function findBaseTooltipElement(element) {
  const elementStyle = getComputedStyle(element);
  if (isStyleWithEllipsis(elementStyle)) {
    return isOverflowX(element) ? element : null;
  }
  if (isStyleWithClamp(elementStyle)) {
    return isOverflowY(element) ? element : null;
  }
  return element.parentElement ? findBaseTooltipElement(element.parentElement) : null;
}

const isStyleWithEllipsis = (style) => style.overflowX === 'hidden' &&
  style.textOverflow === 'ellipsis' &&
  style.whiteSpace === 'nowrap';

const isStyleWithClamp = (style) => style['-webkit-line-clamp'] > 0;

const isOverflowX = (element) => element.offsetWidth < element.scrollWidth;

const isOverflowY = (element) => element.offsetHeight < element.scrollHeight;

export const EllipsisTooltips = React.memo(({
  debounceTimeMilliseconds = 300,
  onShowTooltip
}) => {
  const tooltipBaseElement = React.useRef(null);

  const defineTooltipBaseElement = React.useCallback(debounce((element) => {
    const baseElement = findBaseTooltipElement(element);
    tooltipBaseElement.current = baseElement;
    onShowTooltip?.(baseElement);
  }, debounceTimeMilliseconds), []);

  const setHoveredElement = React.useCallback((hoveredElement) => {
    if (tooltipBaseElement.current && tooltipBaseElement.current !== hoveredElement && !tooltipBaseElement.current.contains(hoveredElement)) {
      defineTooltipBaseElement.cancel();
      tooltipBaseElement.current = null;
      onShowTooltip?.(null);
    }
    defineTooltipBaseElement(hoveredElement);
  }, [onShowTooltip, defineTooltipBaseElement]);

  React.useEffect(() => {
    const mouseOverHandler = (e) => setHoveredElement(e.target);

    document.addEventListener('mouseover', mouseOverHandler);
    return () => {
      document.removeEventListener('mouseover', mouseOverHandler);    
    }
  }, [setHoveredElement]);

  return null;
});

Developer should just define an onShowTooltip callback in props to show a tooltip. Every DOM node with clipped text with ellipsis will have a tooltip on hover.

Demo shows complex content in first block with ellipsis, 10 random filled blocks with line-clamp and 10 random filled blocks with ellipsis.

Github repository with example is here.

Codesandbox playground

Event bubbling and handling in React JS and DOM

Mikhail Petrov — Mon, 30 Oct 2023 14:25:37 +0000

Event bubbling is a concept in the Document Object Model (DOM) of JavaScript. When a user clicks on an element, for example, a , it first runs the click listener on that , then on its parent, then all the way up on other ancestors until it reaches the window. The event pops up as a bubble from the clicked element to the top level.

Let’s add a React.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

And render 3 nested div’s as React components.

React uses a synthetic event wrapper instead of the native browser event to handle events in the DOM. It subscribes to the root element events only. When clicking div.level3, DOM click listeners are called in the following order: div.level3 → div.level2 → div.level1 → div#root. React is subscribed to div#root and receives click event with target set to div.level3. It generates synthetic event and calls onClick handlers at the same bubbling way div.level3 → div.level2 → div.level1. We are still in DOM bubbling phase and the next step is to call listeners on document and window.

React handlers are called after all div#root children handled DOM events. That’s why calling stopPropagation() inside React handlers only prevents that component’s parents from calling onClick handlers.

function TestComponent() {
  const ref = React.useRef();
  React.useEffect(() => {
    ref.current.addEventListener('click', (e) => {
      console.log('Called first');
    });
  }, []);

  return <div onClick={(e) => {
    console.log('Called last');
    e.stopPropagation();
  }} />;
}

React doesn’t receive event if any of its components called DOM stopPropagation().

function TestComponent() {
  const ref = React.useRef();
  React.useEffect(() => {
    ref.current.addEventListener('click', (e) => {
      console.log('Called first');
      e.stopPropagation();
    });
  }, []);

  return <div onClick={(e) => {
    console.log('Never called');
  }} />;
}

Why should one use DOM listeners, if React is a powerful tool for all the tricks with events?

1. Vanilla JS libraries with React wrappers

A lot of libraries created with Vanilla JS are available with React wrappers. React developer should know about event bubbling to interact properly with these libraries.

2. Click-outside task

One of the common tasks is click outside tracking for some popup menu to close it (just subscribe to document click event and check that your component doesn’t contain event.target, example of implementation in ahooks library)

3. Call preventDefault() for passive handlers

Some listeners of React are passive. That’s why implementing custom component behavior for wheel event could be a problem. You can write your logic to handler, but you can’t prevent default scrolling. addEventListener solves this problem.

What was your reason for using addEventListener with React?

And yeah, the picture would not be complete without mentioning the DOM capture phase. But so far I have not had any tasks where I needed to use it with React.

The repository with example is available here. It just logs out all phases of click event.

Link for the CodeSandbox to play with. Just set stopPropagation prop for any Block component.

Using CSS variables with AntD Design system

Mikhail Petrov — Mon, 30 Oct 2023 14:00:00 +0000

Ant Design offers a CSS-in-JS approach for styling your custom components. But how can developers use its Design System tokens in CSS or preprocessors (SASS, LESS)?

Let’s take a look at a small example with a set of panels with buttons in a row.

export const Test: React.FC = () => (
  <div className="app">
    {map(range(4), (index) => (
      <div
        key={index}
        className='container'
      >
        <Button type='primary'>
          Button {index}
        </Button>
      </div>
    ))}
  </div>
);

Application component is wrapped with ConfigProvider component to set a custom theme.

const App: React.FC = () => (
  <ConfigProvider theme={customTheme}>
    <CssTokenBridge />
    <Test />
  </ConfigProvider>
);

CssTokenBridge is a component for passing token values to CSS variables:

import { theme } from 'antd';
import { forEach, includes, isNumber, isString, kebabCase } from 'lodash';
import React from 'react';

function saveToken(value, tokenName) {
  const isPrivateField = tokenName.startsWith('_');
  if (isPrivateField) return;
  const variableName = `--antd-${kebabCase(tokenName)}`;
  if (isString(value)) document.documentElement.style.setProperty(variableName, value);
  if (isNumber(value)) {
    const propertyValue = isPureNumberProperty(tokenName) ? value : `${value}px`;
    document.documentElement.style.setProperty(variableName, propertyValue);
  }
}

const isPureNumberProperty = (tokenName) =>
  includes(tokenName, 'zIndex') ||
  includes(tokenName, 'Weight') ||
  includes(tokenName, 'motion') ||
  includes(tokenName, 'opacity') ||
  includes(tokenName, 'lineHeight');

export const CssTokenBridge = () => {
  const { token } = theme.useToken();
  React.useLayoutEffect(() => {
    forEach(token, saveToken);
  }, [ token ]);

  return null;
};

I use kebab case names for CSS variable names and add an antd prefix. So, the colorPrimary token is saved to the — antd-color-primary CSS variable. There is a workaround for defining units of token value. Most of the numeric tokens use px units, but some of them should be just numbers (like zIndex, lineHeight). The isPureNumberProperty function should return true for such tokens.

Now, we can easily use Design System token values without hard-coded values in styles.

.app {
  display: flex;
  gap: var(--antd-padding-content-horizontal);

  .container {
    background-color: var(--antd-green-1);
    border-radius: var(--antd-border-radius);
    box-shadow: var(--antd-box-shadow);
    padding: var(--antd-padding);
  }
}

One of the advantages of this approach is that it’s easy to supervise design. Token name and its value is available in DevTools.

Hope the next versions of AntD will support css variables for dynamically changed custom themes out of the box.

Repository https://github.com/mvp-v/antd-css-vars