时间戳

首页 > 解决方案 > 如何更改 ReactToolTip 的位置

reactjs - 如何更改 ReactToolTip 的位置

问题描述

我在用import ReactTooltip from 'react-tooltip'

问题是，我不知道如何更改工具提示的位置。有没有默认功能？

我想要如下图所示的输出。

<ReactTooltip 
    id='notificationClickme' 
    place='right' 
    effect='solid' clickable={true}
    delayHide={500}
    delayShow={500}
    delayUpdate={500}
    place={'bottom'}
    border={true}
    isCapture ={true}
    type={'light'}
    ref= { el => this.tooltip = el}
>
</ReactTooltip>

<div id="notificationIcon" className="notification cursor-pointer" 
data-tip data-for='notificationClickme' data-event='click'>Notification icon image</div>

目前我正在变得这样

我想要这样的输出

标签： reactjstooltip

解决方案

要添加关于偏移的答案，还有一种overridePosition可以使用的方法，请参阅github 上的文档。

我使用这种方法来重新计算像这样的大（如拥有大内容）自定义工具提示的位置；

interface Position { left: number; top: number; }
const calculateNewPosition = (pos: Position): Position => {
    const newPosition = { top: window.innerHeight < topOverrideTreshold ? 120 : pos.top, left: window.innerWidth < 440 ? 10 : pos.left };
    return newPosition;
};

return (
    <ReactTooltip
        id={id}
        type="light"
        effect="solid"
        aria-haspopup="true"
        className="custom-tooltip"
        isCapture
        border
        overridePosition={calculateNewPosition}
    >
        <span className="header-container">
            <img src={informationCircle} className="header-icon" />
            <span>{header}</span>
            {isMobile || isTablet ? <span className="stb-sprite-small remove close-icon" onClick={onHide} aria-hidden="true" /> : ""}
        </span>
        <p>{firstParagraph}</p>
    </ReactTooltip>
);

在我的具体情况下，我确保工具提示在小型（移动）设备上按预期显示。

推荐阅读