parent
b1f39c05ab
commit
422786739d
4 changed files with 88 additions and 30 deletions
@ -0,0 +1,49 @@ |
|||||||
|
import React from "react"; |
||||||
|
import ReactTooltip from "react-tooltip"; |
||||||
|
|
||||||
|
const Tooptip1 = ({ items, tooltipPosition, tooltipBgColor }) => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{items.map((item, index) => ( |
||||||
|
<div className="" key={index}> |
||||||
|
<img |
||||||
|
src={item.image} |
||||||
|
data-tip={item.dataTip} |
||||||
|
alt="tooltip" |
||||||
|
className="cursor-pointer" |
||||||
|
/> |
||||||
|
<ReactTooltip |
||||||
|
place={`${tooltipPosition}`} |
||||||
|
type={`${tooltipBgColor}`} |
||||||
|
effect="float" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Tooptip1; |
||||||
|
|
||||||
|
Tooptip1.defaultProps = { |
||||||
|
tooltipPosition: "top", |
||||||
|
tooltipBgColor: "dark", |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
image: "images/SingleProductyellowDotIcon.svg", |
||||||
|
dataTip: "زرد", |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: "images/SingleProductredDotIcon.svg", |
||||||
|
dataTip: "قرمز", |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: "images/SingleProductpurpleDotIcon.svg", |
||||||
|
dataTip: "بنفش", |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: "images/SingleProductlightBlueDotIcon.svg", |
||||||
|
dataTip: "آبی", |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
@ -0,0 +1,25 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
|
||||||
|
import Tooltip1 from "./Tooltip1"; |
||||||
|
|
||||||
|
function Tooltip() { |
||||||
|
const list = { |
||||||
|
1: <Tooltip1 />, |
||||||
|
}; |
||||||
|
const [type, setType] = useState(1); |
||||||
|
return ( |
||||||
|
<div className="w-full flex flex-col items-center"> |
||||||
|
<select |
||||||
|
className="mb-10 w-20 bg-gray-200" |
||||||
|
onChange={(e) => setType(e.target.value)} |
||||||
|
> |
||||||
|
{Object.keys(list).map((option, index) => ( |
||||||
|
<option key={index}>{option}</option> |
||||||
|
))} |
||||||
|
</select> |
||||||
|
{list[type]} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default Tooltip; |
Loading…
Reference in new issue