Make react-tooltip always visible - javascript

I have following code:
// App.js
useEffect(() => {
ReactTooltip.rebuild()
}, [])
// index.html
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="tooltip" data-for="tooltipStep" data-tip="tooltipStep_1"></div>
<div id="root"></div>
</body>
// MyTooltip.js
import ReactTooltip from "react-tooltip";
import ReactDOM from "react-dom";
import React from "react";
import classes from './MyTooltip.module.css';
const MyTooltip = (props) =>
<React.Fragment>
{
ReactDOM.createPortal(
<div>
<div className={classes.backdrop} />
<ReactTooltip
id={props.id}
type="dark"
place={props.place}
className={classes.tooltip}
>
<span>{props.text}</span>
</ReactTooltip>
</div>
,
document.getElementById("tooltip")
)}
</React.Fragment>
export default MyTooltip;
The problem is that when I unmaximize the browser window, tooltip disappears when cursor is positioned beyond the browser window. Also tooltip disappears if scrolling occurs. I have to point cursor to the navigation bar and then back to the webapp for tooltip to show up again after scrolling.
How could I make react-tooltip always visible no matter what?
Thanks in advance.

React tooltip comes with different attribute that includes scrollHide (default is true) and resizeHide (default is true).
You can just set them to false;
<ReactTooltip
id={props.id}
type="dark"
place={props.place}
scrollHide={false}
resizeHide={false}
className={classes.tooltip}
>
<span>{props.text}</span>
</ReactTooltip>

Related

how to get the clicked element when clicked in ReactJS when using map?

I am mapping 'MemeCard.js' elements inside the 'Home.js' using ReactJs 'map' function.
In Home.js element mapping is done like this
memes = ["url1","url2","url3","url4"];
return (
<div className="container my-3">
<div className="row">
{memes.map((meme, index) => {
return (
<div className="col-xl-4 my-5">
<MemeCard imgurl={meme} index={index} />
</div>
);
})}
</div>
</div>
);
My MemeCard element is
import React from 'react';
import MemeCSS from './MemeCard.module.css';
import whiteHeart from '../images/bordered_heart.png';
import blueHeart from '../images/blue_heart.png';
import Share from '../images/share.png';
export default function MemeCard(props) {
function likeBtnClicked(index){
document.getElementById("heartIMG").setAttribute("src",blueHeart);
console.log(index);
}
return (
<div className={MemeCSS.box}>
<img className={MemeCSS.memeImg} src={props.imgurl} alt="meme" />
<div className={MemeCSS.divbutton}>
<img className={MemeCSS.shareImg} src={Share} alt="share" />
<img
id="heartIMG"
className={MemeCSS.likeImg}
onClick={()=>{likeBtnClicked(props.index);}}
src={whiteHeart}
alt="like"
/>
</div>
</div>
);
}
What I want to do is :
Change the 'likeImage' from 'whiteHeart' image to 'blueHeart' (both of which I have imported), when clicked on the 'whiteHeart' image using the 'onClick'.
But, no matter which 'MemeCard's 'whiteHeart' image I click, the code is changing only the image of the first item to 'blueHeart'. Because it is getting only the "document.getElementById("heartIMG")" of the first item everytime.
But the index is printing the index of the correct item(which is clicked).
Can someone tell me how to solve this problem?
Yous should add a dyanmic function which works for each component indvidually.:
// MemeCard.js
import React from 'react';
import MemeCSS from './MemeCard.module.css';
import whiteHeart from '../images/bordered_heart.png';
import blueHeart from '../images/blue_heart.png';
import Share from '../images/share.png';
export default function MemeCard(props) {
function likeBtnClicked(event){
const element = event.currentTarget;
element.setAttribute("src",blueHeart);
}
return (
<div className={MemeCSS.box}>
<img className={MemeCSS.memeImg} src={props.imgurl} alt="meme" />
<div className={MemeCSS.divbutton}>
<img className={MemeCSS.shareImg} src={Share} alt="share" />
<img
id="heartIMG"
className={MemeCSS.likeImg}
onClick={likeBtnClicked}
src={whiteHeart}
alt="like"
/>
</div>
</div>
);
Now all components has there own function.
This will help you ...
https://upmostly.com/tutorials/react-onclick-event-handling-with-examples
or you can use
React JS onClick event handler

Why is my wrapper disrupting the CSS of the content it is wrapping?

When I add a wrapper to this jsx, it breaks the existing CSS and I can't determine why. The page CSS is proper at first, but this wrapper causes the menu-item s to shrink. What am I missing here?
Before:
import React from "react";
import { withRouter } from "react-router-dom";
import "./menu-item.styles.scss";
const MenuItem = ({ title, imageUrl, size, history, match }) => (
<div className={`${size} menu-item`}>
<div
className="background-image"
style={{
backgroundImage: `url(${imageUrl})`,
}}
/>
<div className="content">
<h1 className="title">{title.toUpperCase()} </h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
);
export default withRouter(MenuItem);
After:
import React from "react";
import { withRouter } from "react-router-dom";
import "./menu-item.styles.scss";
const MenuItem = ({ title, imageUrl, size, history, match }) => (
<a href="https://www.google.com">
<div className={`${size} menu-item`}>
<div
className="background-image"
style={{
backgroundImage: `url(${imageUrl})`,
}}
/>
<div className="content">
<h1 className="title">{title.toUpperCase()} </h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
</a>
);
export default withRouter(MenuItem);
The browsers generally add their own style to the anchor tag, and the tag also inherits some style from the body and whatnot. What you need to do is make apply some CSS of your own to the anchor to make sure it's always extended like a wrapper.
Maybe something like this should help.
#mainMenu a {
display: inline-block;
width: 100%; //depending if your menu direction is in rows or columns
}
If your menu item also has some padding, I suggest moving that padding to the anchor as well.
Anyhow, you can always toy around with the CSS applied to your anchor tag if you inspect the element (Right Click -> Inspect). Let me know if you have more questions about this.

React Dom is covering the entire page

I created a code to display the colors inside of an array, "d", and it's working quite fine. I used document.getElementById to display the colors.
Here's the problem:
The only thing displaying on screen is the list of colors. I created like four divs with different colours to use for something else but that isn't showing again.
If I remove the imported react dom and the getElementById code, all my blueDv, PinkDv div etc., come back up.
Is there a way to display the result of the array and still show the divs?
Where am I getting it wrong? Why is the document.getElementById covering the entire page?
import React from "react";
import REACTDOM from "react-dom";
import "./JsShuffle.css";
const JsShuffle = () => {
let d = ['Blue', 'pink', 'green', 'yellow'];
REACTDOM.render(d, document.getElementById('root'));
return (
<div className= "jsshuffle">
<div className= "blueDv">
</div>
<div className= "pinkDv">
</div>
<div className= "greenDv">
</div>
<div className= "yellowDv">
<div id="root"></div>
</div>
</div>
);
}
export default JsShuffle;

React not Loading Local Images

Recently I've been studying React. I'm facing some issues in my code and don't know the reason.
I'm trying to load a local image in my webpage with the following code:
import React from 'react'
import './style.css'
import Card from '../UI/Card'
const BlogPost = (props) => {
return (
<div className="blogPostContainer">
<Card>
<div className="blogHeader">
<span className="blogCategory">Featured</span>
<h1 className="postTitle">Beautiful is Beautiful</h1>
<span className="postedBy">Post on 31 of July, by Victor Arduin</span>
</div>
<div className="postImageContainer">
<img src={require('../../blogPostImages/img1.jpg')} alt="Post Image"/>
</div>
</Card>
</div>
)
}
export default BlogPost
However, when I access the webpage there is no image. When I check the elements of the page I find the following code:
Somehow, it looks like the image is not being loaded to the page. I have checked many questions in the forum, but none of them seems to explain this problem.
I also tried to reinstall few modules as webpack and other dependencies, but the problem still persists. The tree of files of my project are as following:
Thank you for the support!
Try importing the image as
import postImage from "../../blogPostImages/img1.jpg";
Modified code
import React from 'react'
import './style.css'
import Card from '../UI/Card'
import postImage from "../../blogPostImages/img1.jpg"
const BlogPost = (props) => {
return (
<div className="blogPostContainer">
<Card>
<div className="blogHeader">
<span className="blogCategory">Featured</span>
<h1 className="postTitle">Beautiful is Beautiful</h1>
<span className="postedBy">Post on 31 of July, by Victor Arduin</span>
</div>
<div className="postImageContainer">
<img src={postImage} alt="Post Image"/>
</div>
</Card>
</div>
)
}
export default BlogPost
import Img1 from '../../blogPostImages/img1.jpg';
<img src={Img1}/>

How to Set an Image as Background in Next.js?

I have two components:
LoginLayout which should is high order comp for Login component
Login component is page
I need to make the login page have an image as the background.
I tried achieving this through CSS and it does not work.
Here is LoginLayout comp:
export default ({ children, title }) => (
// I tried to add background: url(.../img)) to this login-layout class
<div className="login-layout">
<Head>
<title>Login to Tex</title>
</Head>
<div className="login-wrapper">{children}</div>
</div>
);
How can this be achieved in Next.js?
Make sure you have your CSS attached to your component, as #Deano mentioned.
import './style.css';
If you use CSS modules import like this instead:
import styles from './MyStyles.module.css';
export default ({ children, title }) => (
<div className={styles.loginLayout}>
<Head>
<title>Login to Tex</title>
</Head>
<div className={styles.Login-wrapper}>{children}</div>
</div>
);

Categories