Как сделать всплывающую подсказку (tooltip) на React

Всплывающая подсказка — это элемент интерфейса, который часто появляется на значке, кнопке, тексте или изображении в виде небольшого всплывающего окна при наведении курсора мыши на элемент триггера. В некоторых случаях она даже срабатывает при нажатии кнопки. Она также широко известна как подсказка или информационный наконечник.

Всплывающие подсказки — отличный способ донести дополнительную информацию о действиях пользователя. Вы также можете использовать их для предоставления кратких инструкций по конкретному взаимодействию с пользователем. Поскольку всплывающие подсказки имеют несколько вариантов использования, в тот или иной момент они вам понадобятся в вашем приложении React. Но как создать всплывающую подсказку? Можете ли вы создать полностью повторно используемый компонент всплывающей подсказки в React? Существуют ли какие-либо хорошие пакеты всплывающих подсказок сторонних производителей, которые вы можете использовать?

В этом посте я расскажу вам о создании пользовательского, полностью повторно используемого компонента всплывающей подсказки для вашего приложения React. Затем мы также изучим популярную библиотеку всплывающих подсказок под названием Tippy.js и узнаем, как мы можем использовать ее для добавления всплывающих подсказок в React.

Как создать пользовательский компонент всплывающей подсказки в React

Сначала давайте посмотрим, как мы можем создать наш собственный компонент всплывающей подсказки с нуля. Для краткости мы рассмотрим только некоторые базовые функции всплывающей подсказки. В конце я кратко расскажу, как вы можете сделать этот компонент более гибким, используя props.

Настройка проекта

В этой статье мы создадим новую изолированную среду React. В изолированной среде замените App стиль элемента на App.css:

.app {
  text-align: center;
  margin: 200px;
}

В изолированной среде создайте новую папку tooltip под src папкой. В tooltip папке создайте два файла: Tooltip.js и Tooltip.css. Первая будет содержать код для нашего компонента всплывающей подсказки, а вторая будет содержать некоторые стили для нашего компонента всплывающей подсказки.

Далее давайте добавим некоторый шаблонный код компонента в src/tooltip/Tooltip.js файл:

import './Tooltip.css';

export default function Tooltip(){
    return(
        <div>
        </div>
   )
}

У нас есть простой компонент React под названием Tooltip который возвращает пустое значение div. Мы также импортируем сюда Tooltip.css файл для наших стилей. Давайте также отобразим это внутри нашего App.js файла:

import './App.css';

import Tooltip from './tooltip/Tooltip';

function App() {
  return (
    <div className="app">
      <Tooltip />
    </div>
 );
}

export default App;

Отлично! Теперь у нас все готово. Давайте двигаться дальше.

HTML-шаблон всплывающей подсказки

Теперь давайте разберемся, какой HTML-шаблон вернет наш компонент всплывающей подсказки и почему. Все всплывающие подсказки состоят из двух компонентов: один — элемент пользовательского интерфейса триггера, а другой — сама всплывающая подсказка. Элемент пользовательского интерфейса trigger — это то, что на самом деле запускает всплывающую подсказку при наведении на нее курсора мыши или щелчке по ней. Это может быть кнопка, текст, изображение или что-либо еще.

Всплывающая подсказка — это интерфейс, который отображается на этом элементе триггера с некоторым текстом или значком внутри него. Следовательно, мы создадим два вложенных <div> компонента всплывающей подсказки. Внешний <div> представляет собой триггер всплывающей подсказки. Внутренний <div> — это сама всплывающая подсказка. Вот базовый HTML-шаблон для нашей всплывающей подсказки:

import './Tooltip.css';

export default function Tooltip(){
    return(
        <div className="tooltip-trigger">
            Tooltip Trigger
            <div className='tooltip'>
                Tooltip Text
            </div>
        </div>
   )
}

На этом этапе необходимо просто отобразить два вложенных контейнера с некоторым текстом, как показано ниже:

Всплывающая подсказка отображается при наведении курсора мыши

Далее, давайте сначала скроем всплывающую подсказку. Для этого мы перейдем к Tooltip.css файлу и добавим следующие стили:

.tooltip-trigger.tooltip{
    opacity: 0;
}

Мы изначально установили непрозрачность всплывающей подсказки равной 0. Теперь вам должен быть виден только триггер всплывающей подсказки:

Отлично! Теперь мы можем вернуть непрозрачность всплывающей подсказки на 1 при наведении курсора мыши с помощью селектора наведения:

.tooltip-trigger:hover.tooltip {
    opacity:1;
}

Теперь при наведении курсора мыши на триггер под ним должен появиться текст всплывающей подсказки:

Как только вы уберете курсор мыши с триггера, текст всплывающей подсказки должен исчезнуть. Это основы того, как вы можете отображать и скрывать всплывающую подсказку при наведении курсора мыши. Но на самом деле всплывающая подсказка пока не выглядит как всплывающая подсказка. Итак, давайте продолжим и оформим ее, а также поймем, как мы можем расположить ее относительно элемента триггера.

Оформление всплывающей подсказки

Нам нужно расположить всплывающую подсказку относительно триггера. Итак, сначала мы установим относительное положение триггера, а также установим его отображение как встроенное:

.tooltip-trigger {
    position: relative;
    display: inline;
}

Далее мы зададим несколько стилей самому элементу всплывающей подсказки:

.tooltip-trigger.tooltip{
    width: 100%;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    opacity: 0;
    transition: opacity 1s;
    position: absolute;
    z-index: 1;
}

Мы установили 100%-ную ширину всплывающей подсказки, потому что хотим, чтобы ее размер увеличивался в соответствии с содержимым внутри. Вы также можете присвоить ей значение max-width, если хотите. Для этого примера мы создадим обычную черную всплывающую подсказку с белым текстом, но вы можете изменить цвета. Затем мы также добавим некоторые padding и border-radius. Свойство position: absolute поможет нам расположить всплывающую подсказку относительно элемента триггера так, как нам нравится. Вы можете прочитать о свойстве position, чтобы узнать больше.

Давайте посмотрим, как теперь выглядит наша всплывающая подсказка:

Теперь это больше похоже на всплывающую подсказку! Однако ее расположение немного изменено. Но где вы должны ее разместить?

Расположение всплывающей подсказки

Нам нужно добавить некоторого динамического поведения к положению всплывающей подсказки. Для простоты давайте рассмотрим четыре распространенных положения:

• top
• bottom
• left
• right

Мы создадим четыре класса, которые будут размещать всплывающую подсказку вверху, слева, внизу и справа от элемента триггера. Итак, добавьте в Tooltip.css файл следующие стили:

.tooltip-right{
    top: -5px;
    left: 105%;
}


.tooltip-left{
    top: -5px;
    right: 105%;
}
  
.tooltip-top{
    bottom:105%;
    left:0%;
}

.tooltip-bottom{
    top:105%;
    left:0%;
}

Допустим, мы хотим расположить всплывающую подсказку справа от триггера. При использовании .tooltip-right всплывающая подсказка занимает левое положение на 105%, что означает, что всплывающая подсказка расположена в точке, которая на 5% больше длины триггера. Аналогично, мы также можем расположить его в left, top и bottom. Но как нам динамически добавлять определенный класс position?

Мы можем взять position реквизит в нашем компоненте всплывающей подсказки и использовать его в назначении класса контейнера всплывающей подсказки:

import './Tooltip.css';

export default function Tooltip({
    position="top",
}){
    return(
        <div className="tooltip-trigger">
            Tooltip Trigger
            <div className={`tooltip tooltip-${position}`}>
                Tooltip Text
            </div>
        </div>
   )
}

Теперь давайте вернемся назад и посмотрим, как выглядит всплывающая подсказка:

Давайте также посмотрим, как выглядит правильное позиционирование, установив для position реквизита значение right:

Отлично! Мы также узнали, как правильно расположить всплывающую подсказку относительно триггера.

Добавление стрелочных индикаторов

Мы также можем использовать некоторый CSS для создания индикатора стрелки во всплывающей подсказке на основе ее положения. Для этого мы будем ориентироваться на ::after селектор класса tooltip position класса tooltip, потому что стрелка должна быть ориентирована в соответствии с положением всплывающей подсказки. ::after — это псевдоселектор, который можно использовать для добавления некоторого содержимого к элементу после его собственного элемента. В CSS существуют другие псевдоселекторы или псевдоклассы, которые имеют свои собственные специфические цели и используются в разных вариантах использования.

Мы зададим ей абсолютную позицию, а затем расположим ее относительно самого элемента всплывающей подсказки. Вот классы CSS для каждой позиции всплывающей подсказки, которые создают диалоговое окно, подобное стрелке на всплывающей подсказке.:

.tooltip-trigger.tooltip-top::after {
    content: " ";
    position: absolute;
    top: 100%; 
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}


.tooltip-trigger.tooltip-bottom::after {
    content: " ";
    position: absolute;
    bottom: 100%; 
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}


.tooltip-trigger.tooltip-right::after{
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}


.tooltip-trigger.tooltip-left::after{
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent  transparent transparent black;
}

И теперь вы должны увидеть небольшой индикатор со стрелкой во всплывающей подсказке:

Потрясающе! Теперь давайте посмотрим, как мы можем использовать некоторые реквизиты, чтобы сделать этот компонент всплывающей подсказки более многоразовым.

Возможность повторного использования

Если вы заметили, до этого момента мы жестко кодировали текст всплывающей подсказки. В реальном приложении это будет невозможно. Вы бы хотели, чтобы у разных всплывающих подсказок был разный текст. Итак, давайте возьмем prop с именем tooltipText, который мы можем использовать вместо жесткого кодирования текста всплывающей подсказки:

import './Tooltip.css';

export default function Tooltip({
    tooltipText="Tooltip Text",
    position="right",
}){
    return(
        <div className="tooltip-trigger">
            Tooltip Trigger
            <div className={`tooltip tooltip-${position}`}>
                {tooltipText}
            </div>
        </div>
   )
}

Затем мы можем передать этот реквизит из App.js, где мы рендерим этот компонент:

import React from 'react'
import Tooltip from './tooltip/Tooltip'
import './App.css'

function App() {
  return (
    <div className="app">
      <Tooltip
      position="top"
      tooltipText="Information"
      />
    </div>
 )
}

export default App

И это должно отобразить новый текст всплывающей подсказки, как показано ниже:

Круто! На этой ноте давайте также сделаем триггер всплывающей подсказки динамическим. На данном этапе мы жестко запрограммировали его в компоненте всплывающей подсказки. По сути, нам нужен наш собственный пользовательский интерфейс, вокруг которого мы оборачиваем наш компонент всплывающей подсказки, который может быть визуализирован и действовать как триггер всплывающей подсказки. Для достижения этого мы можем использовать специальные реквизиты, называемые children в React. Вот как будет обновлен компонент всплывающей подсказки:

import './Tooltip.css';

export default function Tooltip({
    children,
    tooltipText="Tooltip Text",
    position="right",
}){
    return(
        <div className="tooltip-trigger">
            {children}
            <div className={`tooltip tooltip-${position}`}>
                {tooltipText}
            </div>
        </div>
   )
}

И теперь мы можем передавать любой пользовательский интерфейс при рендеринге компонента всплывающей подсказки:

import './App.css';
import Tooltip from './tooltip/Tooltip';

function App() {
  return (
    <div className="app">
      <Tooltip
        tooltipText="Information"
      >
        <button>Tooltip Button</button>
      </Tooltip>
    </div>
 );
}

export default App;

И это должно отобразить пользовательский триггер всплывающей подсказки, как показано на рисунке:

Отлично! Мы создали наш собственный пользовательский и многоразовый компонент всплывающей подсказки с нуля. Однако по-прежнему существует множество вариантов использования, для которых этому компоненту всплывающей подсказки потребуются дополнительные реквизиты для настройки, такие как запуск всплывающей подсказки по щелчку, отрисовка некоторого пользовательского шаблона в соответствии с жестко запрограммированным шаблоном всплывающей подсказки или изменение цвета всплывающей подсказки.

Вместо того, чтобы создавать все эти варианты использования с нуля самостоятельно, давайте посмотрим, как мы можем использовать популярную библиотеку всплывающих подсказок под названием Tippy.js.

Как использовать Tippy.js для всплывающих подсказок в React

Сначала установите React -версию Tippy, выполнив следующую команду:

npm i @tippyjs/react

Теперь мы создадим новую папку tippy-tooltip в src папке и компонент внутри папки с именем TippyTooltip.

Мы начнем с импорта основного Tippy компонента из библиотеки вместе со встроенными стилями, которые они предоставляют. Вы можете пропустить стили, если хотите полностью настроить внешний вид всплывающей подсказки. Затем мы передаем саму всплывающую подсказку в content опору Tippy компонента. Наконец, мы визуализируем пользовательский интерфейс триггера всплывающей подсказки, заключенный внутри Tippy компонента, как показано ниже:

import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css'; 


export default function TippyTooltip(){
    return(
        <Tippy content={<span>This is a tooltip</span>}>
            <button>Tooltip trigger</button>
        </Tippy>
   )
}

Обратите внимание, что content prop может использовать HTML-шаблоны вместо простых строк. Это более полезно, чем то, что мы создали в предыдущем разделе, потому что это дает нам больше гибкости при разработке общего интерфейса всплывающей подсказки. Теперь давайте визуализируем наш TippyTooltip компонент внутри App.js:

import './App.css';
import TippyTooltip from './tippy-tooltip/TippyTooltip';

function App() {
  return (
    <div className="App">
      <TippyTooltip/>
    </div>
 );
}

export default App;

Теперь вы должны увидеть красивую всплывающую подсказку от Tippy, как показано на рисунке:

Это выглядит очень похоже на то, что мы сделали, но определенно выглядит лучше!

Всплывающая подсказка React: заключительные соображения

Мы рассмотрели, как создать вашу собственную всплывающую подсказку в React с нуля. Мы также показали вам, как можно использовать популярную библиотеку всплывающих подсказок, такую как Tippy, для быстрого создания и использования всплывающей подсказки в вашем приложении React.

Отсюда вы можете сделать гораздо больше. Если вы хотите изучить созданный нами пользовательский компонент всплывающей подсказки, вы можете попробовать добавить в него дополнительные функции, такие как отображение всплывающей подсказки при нажатии или передача пользовательского шаблона всплывающей подсказки вместо строки.

Наконец, если вы хотите поиграть с исходным кодом, используемым в этом руководстве, вы можете ознакомиться с кодом.