<Link href="/company/add" >
<a title="My New Title" data-toggle='tooltip' className="btn btn-primary">My Link</a>
</Link>
A typical Nextjs Link about works while and adding Tippy Component looks as simple as show below but this dosent work.
<Tippy content="My Tooltip">
<Link href="/company/add" >
<a title="My New Title" data-toggle='tooltip' className="btn btn-primary">My Link</a>
</Link>
</Tippy>
If anyone has done this successfully I will appreciate your help. I don't if there is about other tooltip that works easily with NextJs
This works:
<Tippy content="hi">
<div>
<Link href="/">
<a>
Home Page
</a>
</Link>
</div>
</Tippy>
Even MaterialUIs Tooltip works the same way.
Try this it's working for me.
<Link href="/company/add" >
<Tippy content="My Tooltip">
<a title="My New Title" data-toggle='tooltip' className="btn btn-primary">My Link</a>
</Tippy>
</Link>
Related
I'm totally new with React and I'm facing off a problem with an external Link. I would like to use it for a redirection to GitHub every time I click on the icon but actually the new window is not showing up instead I have this URL :
http://localhost:3000/https://github.com. I don't why it is not working because with my footer i have almost the same code and it is working well. If you have solutions for that it will be much appreciated ! Thank you very much
Carditem.js
import React from 'react';
import { Link } from 'react-router-dom';
function CardItem(props) {
return (
<>
<li className='cards__item'>
<Link className='cards__item__link' >
<figure className='cards__item__pic-wrap' data-category={props.label}>
<img
className='cards__item__img'
alt='Travel '
src={props.src}
/>
</figure>
<div className='cards__item__info'>
<h5 className='cards__item__text'>{props.text}</h5>
<Link
class='social-icon-card-github'
to={{ pathname: "https://github.com" }}
<i class='fab fa-github' />
</Link>
</div>
</Link>
</li>
</>
);
}
export default CardItem;
Footer.js
import React from 'react';
import './Footer.css';
import { Link } from 'react-router-dom';
function Footer() {
return (
<div className='footer-container'>
<section class='social-media'>
<div class='social-media-wrap'>
<small class='website-rights'>© 2020</small>
<div class='social-icons'>
<Link
class='social-icon-link github'
to={{ pathname: "https://github.com" }}
target='_blank'
aria-label='Github'
>
<i class='fab fa-github' />
</Link>
<Link
class='social-icon-link codepen'
to={{ pathname: "https://codepen.io" }}
target='_blank'
aria-label='Codepen'
>
<i class='fab fa-codepen' />
</Link>
<Link
class='social-icon-link Linkedin'
to={{ pathname: "https://www.linkedin.com" }}
target='_blank'
aria-label='LinkedIn'
>
<i class='fab fa-linkedin' />
</Link>
</div>
</div>
</section>
</div>
);
}
export default Footer;
react-router is used for internal navigation, if you want to navigate outside of your website you should use an a element:
<a
class='social-icon-link github'
href="https://github.com"
target='_blank'
rel="noopener"
aria-label='Github'
>
<i class='fab fa-github' />
</a>
The rel="noopener" is a good security practice: https://mathiasbynens.github.io/rel-noopener/
You cannot call external links with react-router-dom's Link component. Try the following:
Link
You can also open links in a new tab:
Link in new tab
If your URL coming from the API's you can use like that
<Link to={{ pathname:`https://${strFacebook}`}} target="_blank"> Facebook </Link>
Hope you have understood.
The main fact is you need to use tag instead of tag.
Side by side you have to endure that the url must start with "https:" else it will always redirect to localhost:........
for example, if you write Github it will not work. You have to write Gitbuh
the link element is not closed
<Link
class='social-icon-card-github'
to={{ pathname: "https://github.com" }}>
<i class='fab fa-github' />
</Link>
item.image URL is coming form the API but when I try to map in <a> tag it will work fine which is for the download icon but for the view icon it will open the same file.
data.map(item => {
return <>
<Modal open={open} onClose={onCloseModal} center>
<div className="modalContent">
<iframe src={item?.image}>
</iframe>
</div>
</Modal>
<a href={item?.image} target="_blank" download >
<span className="IconBoc">
<AiOutlineDownload />
</span>
</a>
</>
})
You should be using <img> instead of <iframe>.
iframes are to embed other websites into your website.
For media there already exist tags like <img> or <video>.
Try:
data.map(item => {
return <>
<Modal open={open} onClose={onCloseModal} center>
<div className="modalContent">
<img src={item?.image} />
</div>
</Modal>
<a href={item?.image} target="_blank" download >
<span className="IconBoc">
<AiOutlineDownload />
</span>
</a>
</>
})
I want to build a Interactive footer. I don't want to load an other page with new footer. I only want to change footer Component it self by click on links.
<footer className="Footer">
<Link to="/">
<img className="Footer__logo" src={logo} alt="logo"/>
</Link>
<div className="Footer__Nav">
<Link className="Footer__link" to="/email">
<AlternateEmailIcon />
<span>Email</span>
</Link>
<Link className="Footer__link" to="/development">
<PhoneIcon />
<span>Telefon</span>
</Link>
</div>
</footer>
I'm totally new with React and I'm facing off a problem with an external Link. I would like to use it for a redirection to GitHub every time I click on the icon but actually the new window is not showing up instead I have this URL :
http://localhost:3000/https://github.com. I don't why it is not working because with my footer i have almost the same code and it is working well. If you have solutions for that it will be much appreciated ! Thank you very much
Carditem.js
import React from 'react';
import { Link } from 'react-router-dom';
function CardItem(props) {
return (
<>
<li className='cards__item'>
<Link className='cards__item__link' >
<figure className='cards__item__pic-wrap' data-category={props.label}>
<img
className='cards__item__img'
alt='Travel '
src={props.src}
/>
</figure>
<div className='cards__item__info'>
<h5 className='cards__item__text'>{props.text}</h5>
<Link
class='social-icon-card-github'
to={{ pathname: "https://github.com" }}
<i class='fab fa-github' />
</Link>
</div>
</Link>
</li>
</>
);
}
export default CardItem;
Footer.js
import React from 'react';
import './Footer.css';
import { Link } from 'react-router-dom';
function Footer() {
return (
<div className='footer-container'>
<section class='social-media'>
<div class='social-media-wrap'>
<small class='website-rights'>© 2020</small>
<div class='social-icons'>
<Link
class='social-icon-link github'
to={{ pathname: "https://github.com" }}
target='_blank'
aria-label='Github'
>
<i class='fab fa-github' />
</Link>
<Link
class='social-icon-link codepen'
to={{ pathname: "https://codepen.io" }}
target='_blank'
aria-label='Codepen'
>
<i class='fab fa-codepen' />
</Link>
<Link
class='social-icon-link Linkedin'
to={{ pathname: "https://www.linkedin.com" }}
target='_blank'
aria-label='LinkedIn'
>
<i class='fab fa-linkedin' />
</Link>
</div>
</div>
</section>
</div>
);
}
export default Footer;
react-router is used for internal navigation, if you want to navigate outside of your website you should use an a element:
<a
class='social-icon-link github'
href="https://github.com"
target='_blank'
rel="noopener"
aria-label='Github'
>
<i class='fab fa-github' />
</a>
The rel="noopener" is a good security practice: https://mathiasbynens.github.io/rel-noopener/
You cannot call external links with react-router-dom's Link component. Try the following:
Link
You can also open links in a new tab:
Link in new tab
If your URL coming from the API's you can use like that
<Link to={{ pathname:`https://${strFacebook}`}} target="_blank"> Facebook </Link>
Hope you have understood.
The main fact is you need to use tag instead of tag.
Side by side you have to endure that the url must start with "https:" else it will always redirect to localhost:........
for example, if you write Github it will not work. You have to write Gitbuh
the link element is not closed
<Link
class='social-icon-card-github'
to={{ pathname: "https://github.com" }}>
<i class='fab fa-github' />
</Link>
i have used a react-bootstrap accordion. I have done an api call to populate dynamic data within the accordion by mapping the data.Its background color is white and if i use a break tag to break between the accordions everything becomes white.you can't figure they are different accordions.
i want to modify the accordion properties using css.My two main concern here are
1) to give space between accordions.
2) when i click on one accordion header all the accordions opens.
Following is my piece of code for accordion:
<Accordion className="accordion-length" >
stateCategory.categories !== undefined ?(
stateCategory.categories.map((cat)=>{
return (
<Card className="card-style">
<Accordion.Toggle id="Accordion" as={Card.Header} className=" back card-style " style={{top: "5px"}}>
{cat.name}
<Link onClick={()=>{handleBlock(cat)}}>
<img
alt="block"
src={require("../../assets/block.svg")}
className="images" />
</Link>
<Link onClick={()=>{handleDelete(cat)}} >
<img
alt="delete"
src={require("../../assets/delete.svg")}
className="images" /></Link>
<Link onClick={()=>{handleSubCategoryCreate(cat)}}>
<img
alt="add "
src={require("../../assets/add.svg")}
className="images" /></Link>
<Link onClick={()=>{handleEdit(cat)}}>
<img
alt="edit "
src={require("../../assets/edit.svg")}
className="images" /></Link>
</Accordion.Toggle>
<Accordion.Collapse style={{whiteSpace : "pre"}}>
<Card.Body>
<ul>
{(cat.jobSubCategories) &&
cat.jobSubCategories.map((subCat)=>{
return <li key={subCat.id}>{subCat.name}
<Link onClick={()=>{handleSubBlock(subCat)}}>
<img
alt="block"
src={require("../../assets/block.svg")}
className="images" />
</Link>
<Link onClick={()=>{handleSubCategoryDelete(subCat)}}>
<img
alt="delete"
src={require("../../assets/delete.svg")}
className="images" />
</Link>
<Link onClick={()=>{handleSubEdit(subCat)}}>
<img
alt="edit "
src={require("../../assets/edit.svg")}
className="images" />
</Link>
</li>
})
}
</ul>
</Card.Body>
</Accordion.Collapse>
</Card>
)
})
):<></>
}
</Accordion>