Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit 943014c

Browse filesBrowse files
committed
refactor(CTooltip): simplify the syntax of the component.
1 parent 80b9a05 commit 943014c
Copy full SHA for 943014c

File tree

Expand file treeCollapse file tree

2 files changed

+22
-49
lines changed
Filter options
Expand file treeCollapse file tree

2 files changed

+22
-49
lines changed

‎src/components/tooltip/CTooltip.tsx

Copy file name to clipboardExpand all lines: src/components/tooltip/CTooltip.tsx
+22-12Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React, { FC, ReactElement, ReactNode, useState } from 'react'
2-
import PropTypes from 'prop-types'
32
import { createPortal } from 'react-dom'
3+
import PropTypes from 'prop-types'
4+
import classNames from 'classnames'
45
import { Manager, Popper, Reference } from 'react-popper'
56
import { Transition } from 'react-transition-group'
67

7-
import { CTooltipContent } from './CTooltipContent'
8+
// import { CTooltipContent } from './CTooltipContent'
89
import { Triggers, triggerPropType } from '../Types'
910

1011
export interface CTooltipProps {
@@ -30,7 +31,7 @@ export interface CTooltipProps {
3031
/**
3132
* 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.
3233
*/
33-
placement?: 'top' | 'right' | 'bottom' | 'left'
34+
placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left'
3435
/**
3536
* Toggle the visibility of popover component.
3637
*/
@@ -39,6 +40,7 @@ export interface CTooltipProps {
3940

4041
export const CTooltip: FC<CTooltipProps> = ({
4142
children,
43+
content,
4244
placement = 'top',
4345
onHide,
4446
onShow,
@@ -95,15 +97,22 @@ export const CTooltip: FC<CTooltipProps> = ({
9597
const transitionClass = getTransitionClass(state)
9698
return (
9799
<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}
104111
{...rest}
105-
{...p}
106-
></CTooltipContent>
112+
>
113+
<div className="tooltip-arrow" {...arrowProps}></div>
114+
<div className="tooltip-inner">{content}</div>
115+
</div>
107116
)}
108117
</Popper>
109118
)
@@ -117,7 +126,8 @@ export const CTooltip: FC<CTooltipProps> = ({
117126

118127
CTooltip.propTypes = {
119128
children: PropTypes.any,
120-
placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
129+
content: PropTypes.node,
130+
placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
121131
onHide: PropTypes.func,
122132
onShow: PropTypes.func,
123133
trigger: triggerPropType,

‎src/components/tooltip/CTooltipContent.tsx

Copy file name to clipboardExpand all lines: src/components/tooltip/CTooltipContent.tsx
-37Lines changed: 0 additions & 37 deletions
This file was deleted.

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.