tooltip

Tooltip组件

安装

npm install --save react-widget-tooltip

使用

importReactfrom"react";importTooltipfrom"react-widget-tooltip";import"react-widget-tooltip/style";import"./styles.css";exportdefaultfunctionApp(){return(<divclassName="App"style={{padding: 100}}><Tooltiptitle="...Tooltip..."><button>试试</button></Tooltip></div>);}

Interfaces

exportinterfaceTooltipPropsextendsOmit<TriggerProps,"popup"|"defaultPopupVisible"|"popupVisible"|"destroyPopupOnHide"|"action"|"popupTransition"|"adjustPosition">{/** 提示框样式 */className?: string;/** 提示框样式属性 */style?: React.CSSProperties;/** 提示文字 */title?: React.ReactNode|(()=>React.ReactNode);/** 提示框位置，可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom */placement?: TriggerProps["placement"];/** 默认是否显隐 */defaultVisible?: boolean;/** 用于手动控制浮层显隐，受控 */visible?: boolean;/** 触发行为，可选 "click" | "contextMenu" | "focus" | "hover" 可使用数组设置多个触发行为 */trigger?: TriggerProps["action"];/** 提示框偏移量 */offset?: number;/** 是否显示提示箭头 */visibleArrow?: boolean;/** 箭头大小，默认为：6 */arrowSize?: number;/** 箭头保持在中间 */keepArrowAtCenter?: boolean;/** 关闭后是否销毁 */destroyTooltipOnHide?: boolean;/** 提示动画，参考 react-transition-group*/transition?: TriggerProps["popupTransition"];/** 显示隐藏的回调 */onVisibleChange?: (visible: boolean)=>void;}

其他参数 trigger

defaultProps

{prefixCls: "rw-tooltip",placement: "top",defaultVisible: false,visibleArrow: true,keepArrowAtCenter: false,destroyTooltipOnHide: true,arrowSize: 6,offset: 0,delay: 100,trigger: ["hover"],outsideHideEventName: ["mousedown","click"],}

基础样式

.rw-tooltip-root {
position: absolute;
left:0;
right:0;
top:0;
}
.rw-tooltip {
position: absolute;
left:0;
top:0;
font-size:14px;
z-index:2000;
}
.rw-tooltip-mask {
position: fixed;
left:0;
top:0;
right:0;
bottom:0;
background:#000;
opacity:0.1;
z-index:2000;
}
.rw-tooltip-inner {
position: relative;
min-width:30px;
min-height:32px;
padding:6px8px;
color:#fff;
text-align: left;
text-decoration: none;
word-wrap: break-word;
background-color:rgba(0,0,0,0.9);
border-radius:2px;
box-shadow:03px6px-4pxrgba(0,0,0,0.12),06px16px0rgba(0,0,0,0.08),09px28px8pxrgba(0,0,0,0.05);
box-sizing: border-box;
}
.rw-tooltip-arrow {
position: absolute;
width:0;
height:0;
border-color: transparent;
border-style: solid;
box-sizing: border-box;
}
.rw-tooltip-placement-top> .rw-tooltip-arrow,
.rw-tooltip-placement-top-left> .rw-tooltip-arrow,
.rw-tooltip-placement-top-right> .rw-tooltip-arrow {
bottom:-5px;
border-width:5px5px0;
border-top-color:rgba(0,0,0,0.9);
}
.rw-tooltip-placement-bottom> .rw-tooltip-arrow,
.rw-tooltip-placement-bottom-left> .rw-tooltip-arrow,
.rw-tooltip-placement-bottom-right> .rw-tooltip-arrow {
top:-5px;
border-width:05px5px;
border-bottom-color:rgba(0,0,0,0.9);
}
.rw-tooltip-placement-left> .rw-tooltip-arrow,
.rw-tooltip-placement-left-top> .rw-tooltip-arrow,
.rw-tooltip-placement-left-bottom> .rw-tooltip-arrow {
right:-5px;
border-width:5px05px5px;
border-left-color:rgba(0,0,0,0.9);
}
.rw-tooltip-placement-right> .rw-tooltip-arrow,
.rw-tooltip-placement-right-top> .rw-tooltip-arrow,
.rw-tooltip-placement-right-bottom> .rw-tooltip-arrow {
left:-5px;
border-width:5px5px5px0;
border-right-color:rgba(0,0,0,0.9);
}
.rw-tooltip-placement-top-left> .rw-tooltip-arrow,
.rw-tooltip-placement-bottom-left> .rw-tooltip-arrow {
left:16px;
}
.rw-tooltip-placement-top> .rw-tooltip-arrow,
.rw-tooltip-placement-bottom> .rw-tooltip-arrow {
left:50%;
margin-left:-5px;
}
.rw-tooltip-placement-top-right> .rw-tooltip-arrow,
.rw-tooltip-placement-bottom-right> .rw-tooltip-arrow {
right:16px;
}
.rw-tooltip-placement-left-top> .rw-tooltip-arrow,
.rw-tooltip-placement-right-top> .rw-tooltip-arrow {
top:8px;
}
.rw-tooltip-placement-left> .rw-tooltip-arrow,
.rw-tooltip-placement-right> .rw-tooltip-arrow {
top:50%;
margin-top:-5px;
}
.rw-tooltip-placement-left-bottom> .rw-tooltip-arrow,
.rw-tooltip-placement-right-bottom> .rw-tooltip-arrow {
bottom:8px;
}
.rw-tooltip-enter {
opacity:0;
}
.rw-tooltip-enter-active {
opacity:1;
transition: opacity 200ms;
}
.rw-tooltip-exit {
opacity:1;
}
.rw-tooltip-exit-active {
opacity:0;
transition: opacity 200ms;
}