tippy js 内容换行

Question

import React, { useState } from "react";
import './styles/Register.css'
import axios from "axios";
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css'

我在我的 React 应用程序中使用 Tippy js。我想在

min length 8

和

must include

之后添加换行符。

这是代码：

<Tippy placement="bottom" content="Min length 8, must incude 1 Uppercase, 1 Lowercase & 1 number">
    <input className="form-control" id="password" name="password" value={user.password} type="password" placeholder="Password" onChange={handleChange}></input>
</Tippy>

Answer 1

您可以将数组传递给

content

的

Tippy

，其中每一行都是数组中的一个字符串，并且每次想要换行时，在行之间有一个

<br />

标记作为另一个元素。

<Tippy placement="bottom" content={['Min length 8,', <br />, 'must include', <br />, '1 Uppercase, 1 Lowercase & 1 number']}>

Answer 2

这是一个如何向工具提示添加多行的简单示例。

import React from 'react';
import { Tooltip } from 'react-tippy';
import 'react-tippy/dist/tippy.css';
import MyComponent from './MyComponent';

const ComponentWithTooltip = () => {
    const myTooltip = stringArray ? (
        <>
            {stringArray.map((s) => (
                <>
                    <span style={{ textAlign: 'left', display: 'block' }}>{s}</span>
                </>
            ))}
        </>
    ) : (
        null
    );

    return (
        <Tooltip html={myTooltip}>
            <MyComponent />
        </Tooltip>
    );
}

export default ComponentWithTooltip;

Answer 3

这个问题的一个简单答案是在内容属性中使用片段和换行标签。

您的开始标签应如下所示。

<Tippy placement="bottom" content={<>Min length 8, must incude</><br /><>1 Uppercase, 1 Lowercase & 1 number</>}>