1
1
import React , { FC , ReactElement , ReactNode , useState } from 'react'
2
- import PropTypes from 'prop-types'
3
2
import { createPortal } from 'react-dom'
3
+ import PropTypes from 'prop-types'
4
+ import classNames from 'classnames'
4
5
import { Manager , Popper , Reference } from 'react-popper'
5
6
import { Transition } from 'react-transition-group'
6
7
7
- import { CTooltipContent } from './CTooltipContent'
8
+ // import { CTooltipContent } from './CTooltipContent'
8
9
import { Triggers , triggerPropType } from '../Types'
9
10
10
11
export interface CTooltipProps {
@@ -30,7 +31,7 @@ export interface CTooltipProps {
30
31
/**
31
32
* Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
32
33
*/
33
- placement ?: 'top' | 'right' | 'bottom' | 'left'
34
+ placement ?: 'auto' | ' top' | 'right' | 'bottom' | 'left'
34
35
/**
35
36
* Toggle the visibility of popover component.
36
37
*/
@@ -39,6 +40,7 @@ export interface CTooltipProps {
39
40
40
41
export const CTooltip : FC < CTooltipProps > = ( {
41
42
children,
43
+ content,
42
44
placement = 'top' ,
43
45
onHide,
44
46
onShow,
@@ -95,15 +97,22 @@ export const CTooltip: FC<CTooltipProps> = ({
95
97
const transitionClass = getTransitionClass ( state )
96
98
return (
97
99
< Popper placement = { placement } >
98
- { ( p ) => (
99
- < CTooltipContent
100
- transitionClass = { transitionClass }
101
- placementClassNamePostfix = {
102
- placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
103
- }
100
+ { ( { arrowProps, style, ref } ) => (
101
+ < div
102
+ className = { classNames (
103
+ `tooltip bs-tooltip-${
104
+ placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
105
+ } `,
106
+ transitionClass ,
107
+ ) }
108
+ ref = { ref }
109
+ role = "tooltip"
110
+ style = { style }
104
111
{ ...rest }
105
- { ...p }
106
- > </ CTooltipContent >
112
+ >
113
+ < div className = "tooltip-arrow" { ...arrowProps } > </ div >
114
+ < div className = "tooltip-inner" > { content } </ div >
115
+ </ div >
107
116
) }
108
117
</ Popper >
109
118
)
@@ -117,7 +126,8 @@ export const CTooltip: FC<CTooltipProps> = ({
117
126
118
127
CTooltip . propTypes = {
119
128
children : PropTypes . any ,
120
- placement : PropTypes . oneOf ( [ 'top' , 'right' , 'bottom' , 'left' ] ) ,
129
+ content : PropTypes . node ,
130
+ placement : PropTypes . oneOf ( [ 'auto' , 'top' , 'right' , 'bottom' , 'left' ] ) ,
121
131
onHide : PropTypes . func ,
122
132
onShow : PropTypes . func ,
123
133
trigger : triggerPropType ,
0 commit comments