Fancy tooltip customization in React Tooltip component
18 Jan 202324 minutes to read
The arrow of the tooltip can be customized as needed by customizing CSS in the sample-side.
The EJ2 tooltip component is achieved through CSS3 format and positioned the tip arrow according to the tooltip positions like TopCenter, BottomLeft, RightTop, and more.
Here, the tip arrow is customized as Curved tooltip and Bubble tooltip.
Curved tip
The content for the tip pointer arrow has been added. To customize the curved tip arrow, override the following CSS class of tip arrow.
<TooltipComponent content='Tooltip Content' cssClass='curvetips e-tooltip-css'>
</TooltipComponent> .e-arrow-tip-outer.e-tip-bottom,
.e-arrow-tip-outer.e-tip-top {
border-left: none !important;
border-right: none !important;
border-top: none !important;
}
.e-arrow-tip.e-tip-top {
transform: rotate(170deg);
}Bubble tip
The two divs(inner div and outer div) have been added to achieve the bubble tip arrow. To customize the bubble tip arrow, override the following CSS class of tip arrow.
<TooltipComponent content='Tooltip Content' cssClass='bubbletip e-tooltip-css'>
</TooltipComponent> .e-arrow-tip-outer.e-tip-bottom, .e-arrow-tip-outer.e-tip-top
{
border-radius: 50px;
height: 10px;
width: 10px;
}
.e-arrow-tip-inner.e-tip-bottom, .e-arrow-tip-inner.e-tip-top
{
border-radius: 50px;
height: 10px;
width: 10px;
}These tip arrow customizations have been achieved through CSS changes in the sample level. The tooltip position can be changed by using the radio button click event.
The arrow tip pointer can also be disabled by using the showTipPointer property in a tooltip.
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent, RadioButtonComponent, } from '@syncfusion/ej2-react-buttons';
function App() {
let tooltip;
let bubble;
function onChange(args) {
tooltip.position = args.value;
tooltip.dataBind();
}
function onChanged(args) {
bubble.position = args.value;
if (bubble.position == "BottomLeft") {
bubble.offsetY = -30;
}
else {
bubble.offsetY = 0;
}
bubble.dataBind();
}
return (<div id="container">
<TooltipComponent cssClass="curvetips e-tooltip-css" content="Tooltip arrow customized" target="#target" ref={d => (tooltip = d)}>
<TooltipComponent cssClass="bubbletip e-tooltip-css" content="Tooltip arrow customized as balloon tip" target="#bubbletip" position="TopRight" ref={d => (bubble = d)}>
<TooltipComponent cssClass="pointertip e-tooltip-css" mouseTrail={true} target="#tooltip" content="Disabled tooltip pointer" showTipPointer={false}>
<div id="customization" className="customTipContainer">
<ButtonComponent id="target">Customized Tip Arrow</ButtonComponent>
<div id="positions">
<ul>
<li>
<RadioButtonComponent id="element1" label="TopCenter" name="default" checked={true} value="TopCenter" change={onChange}/>
</li>
<li>
<RadioButtonComponent id="element2" label="BottomLeft" name="default" value="BottomLeft" change={onChange}/>
</li>
</ul>
</div>
</div>
<div id="balloon" className="customTipContainer">
<ButtonComponent id="bubbletip">Bubble Tip Arrow</ButtonComponent>
<div id="btn">
<ul>
<li>
<RadioButtonComponent id="radio1" label="BottomLeft" name="position" value="BottomLeft" change={onChanged}/>
</li>
<li>
<RadioButtonComponent id="radio2" label="TopRight" name="position" value="TopRight" checked={true} change={onChanged}/>
</li>
</ul>
</div>
</div>
<div id="disabledContainer" className="customTipContainer">
<ButtonComponent id="tooltip">Disabled Tip Arrow</ButtonComponent>
</div>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</div>);
}
export default App;import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import {
ButtonComponent,
RadioButtonComponent,
ChangeArgs,
} from '@syncfusion/ej2-react-buttons';
function App() {
let tooltip: TooltipComponent;
let bubble: TooltipComponent;
function onChange(args: ChangeArgs): void {
tooltip.position = args.value as any;
tooltip.dataBind();
}
function onChanged(args: ChangeArgs): void {
bubble.position = args.value as any;
if (bubble.position == "BottomLeft") {
bubble.offsetY = -30;
} else {
bubble.offsetY = 0;
}
bubble.dataBind();
}
return (
<div id="container">
<TooltipComponent
cssClass="curvetips e-tooltip-css"
content="Tooltip arrow customized"
target="#target"
ref={d => (tooltip = d as any)}
>
<TooltipComponent
cssClass="bubbletip e-tooltip-css"
content="Tooltip arrow customized as balloon tip"
target="#bubbletip"
position="TopRight"
ref={d => (bubble = d as any)}
>
<TooltipComponent
cssClass="pointertip e-tooltip-css"
mouseTrail={true}
target="#tooltip"
content="Disabled tooltip pointer"
showTipPointer={false}
>
<div id="customization" className="customTipContainer">
<ButtonComponent id="target">Customized Tip Arrow</ButtonComponent>
<div id="positions">
<ul>
<li>
<RadioButtonComponent
id="element1"
label="TopCenter"
name="default"
checked={true}
value="TopCenter"
change={onChange as any}
/>
</li>
<li>
<RadioButtonComponent
id="element2"
label="BottomLeft"
name="default"
value="BottomLeft"
change={onChange as any}
/>
</li>
</ul>
</div>
</div>
<div id="balloon" className="customTipContainer">
<ButtonComponent id="bubbletip">Bubble Tip Arrow</ButtonComponent>
<div id="btn">
<ul>
<li>
<RadioButtonComponent
id="radio1"
label="BottomLeft"
name="position"
value="BottomLeft"
change={onChanged as any}
/>
</li>
<li>
<RadioButtonComponent
id="radio2"
label="TopRight"
name="position"
value="TopRight"
checked={true}
change={onChanged as any}
/>
</li>
</ul>
</div>
</div>
<div id="disabledContainer" className="customTipContainer">
<ButtonComponent id="tooltip">Disabled Tip Arrow</ButtonComponent>
</div>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</div>
);
}
export default App;import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { RadioButtonComponent, } from '@syncfusion/ej2-react-buttons';
function App() {
let tooltip;
let bubble;
function onChange(args) {
tooltip.position = args.value;
tooltip.dataBind();
}
function onChanged(args) {
bubble.position = args.value;
if (bubble.position == 'BottomLeft') {
bubble.offsetY = -30;
}
else {
bubble.offsetY = 0;
}
bubble.dataBind();
}
return (<div id="container">
<TooltipComponent cssClass="curvetips e-tooltip-css" content="Tooltip arrow customized" target="#target" ref={d => tooltip = d}>
<TooltipComponent cssClass="bubbletip e-tooltip-css" content="Tooltip arrow customized as balloon tip" target="#bubbletip" position="TopRight" ref={d => bubble = d}>
<TooltipComponent cssClass="pointertip e-tooltip-css" mouseTrail={true} target="#tooltip" content="Disabled tooltip pointer" showTipPointer={false}>
<div id="customization" className="customTipContainer">
<button className="e-btn" id="target">
Customized Tip Arrow
</button>
<div id="positions">
<ul>
<li>
<RadioButtonComponent id="element1" label="TopCenter" name="default" checked={true} value="TopCenter" change={onChange}/>
</li>
<li>
<RadioButtonComponent id="element2" label="BottomLeft" name="default" value="BottomLeft" change={onChange}/>
</li>
</ul>
</div>
</div>
<div id="balloon" className="customTipContainer">
<button className="e-btn" id="bubbletip">
Bubble Tip Arrow
</button>
<div id="btn">
<ul>
<li>
<RadioButtonComponent id="radio1" label="BottomLeft" name="position" value="BottomLeft" change={onChanged}/>
</li>
<li>
<RadioButtonComponent id="radio2" label="TopRight" name="position" value="TopRight" checked={true} change={onChanged}/>
</li>
</ul>
</div>
</div>
<div id="disabledContainer" className="customTipContainer">
<button className="e-btn" id="tooltip">
Disabled Tip Arrow
</button>
</div>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import {
RadioButtonComponent,
ChangeArgs,
} from '@syncfusion/ej2-react-buttons';
function App() {
let tooltip: TooltipComponent;
let bubble: TooltipComponent;
function onChange(args: ChangeArgs): void {
tooltip.position = args.value as any;
tooltip.dataBind();
}
function onChanged(args: ChangeArgs): void {
bubble.position = args.value as any;
if (bubble.position == 'BottomLeft') {
bubble.offsetY = -30;
} else {
bubble.offsetY = 0;
}
bubble.dataBind();
}
return (
<div id="container">
<TooltipComponent
cssClass="curvetips e-tooltip-css"
content="Tooltip arrow customized"
target="#target"
ref={d => tooltip = d}
>
<TooltipComponent
cssClass="bubbletip e-tooltip-css"
content="Tooltip arrow customized as balloon tip"
target="#bubbletip"
position="TopRight"
ref={d => bubble = d}
>
<TooltipComponent
cssClass="pointertip e-tooltip-css"
mouseTrail={true}
target="#tooltip"
content="Disabled tooltip pointer"
showTipPointer={false}
>
<div id="customization" className="customTipContainer">
<button className="e-btn" id="target">
Customized Tip Arrow
</button>
<div id="positions">
<ul>
<li>
<RadioButtonComponent
id="element1"
label="TopCenter"
name="default"
checked={true}
value="TopCenter"
change={onChange}
/>
</li>
<li>
<RadioButtonComponent
id="element2"
label="BottomLeft"
name="default"
value="BottomLeft"
change={onChange}
/>
</li>
</ul>
</div>
</div>
<div id="balloon" className="customTipContainer">
<button className="e-btn" id="bubbletip">
Bubble Tip Arrow
</button>
<div id="btn">
<ul>
<li>
<RadioButtonComponent
id="radio1"
label="BottomLeft"
name="position"
value="BottomLeft"
change={onChanged}
/>
</li>
<li>
<RadioButtonComponent
id="radio2"
label="TopRight"
name="position"
value="TopRight"
checked={true}
change={onChanged}
/>
</li>
</ul>
</div>
</div>
<div id="disabledContainer" className="customTipContainer">
<button className="e-btn" id="tooltip">
Disabled Tip Arrow
</button>
</div>
</TooltipComponent>
</TooltipComponent>
</TooltipComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));