Clash Royale CLAN TAG

using react tooltip with styled components

anyone got any experience using react-tooltip with styled-components?

react-tooltip

styled-components

I tried to wrap my tooltip inside a styled component but they styles weren't fully showing

I wanted a yellow background but got a yellow background with a massive black border

I also want to place the tooltip directly over the top of where I hover, can anyone show me how to do this if possible?

code:

<div>
<ReactTooltip className="extraClass" effect="solid">
{'I shall be the text and this is where I will go'}
</ReactTooltip>
</div>


how do I add the extraClass if im using styled-comps?

1 Answer
1

As you haven't shared the code,here is the stateless component with react-tooltip

react-tooltip

import React from "react";
import ReactTooltip from 'react-tooltip'
import {Link} from "react-router-dom"

const UserActionLink = ({to,tooltip,alignRight,btnClassname,iconClassname,name,toolTipName}) =>{

const buttonClassname = btnClassname ? " btn mx-2 " + btnClassname : " btn mx-2 "
const iconsClassname = iconClassname ? " fa " + iconClassname : " fa "
const align = alignRight ? " float-right " : " float-left "

return (
<span>
<Link className={[buttonClassname , align ].join(' ')} data-tip={toolTipName} to={to}>
<i className={iconsClassname} aria-hidden="true"></i> {name}
</Link>
<ReactTooltip />
</span>
);
}
export default UserActionLink


EDIT
Here is the working code:

<div className="customTooltip">
<ReactTooltip effect="solid">
{'I shall be the text and this is where I will go'}
</ReactTooltip>
</div>
.customTooltip .__react_component_tooltip.place-top{
margin-top:0 !important;
}
.customTooltip .__react_component_tooltip.type-dark{
background-color: #e6bd32;
}
.customTooltip .__react_component_tooltip.type-dark.place-top:after {
border-top-color: #d2ac2d;
border-top-style: solid;
border-top-width: 6px;
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.