diff --git a/client/src/components/SingleReview/SingleReview-view.jsx b/client/src/components/SingleReview/SingleReview-view.jsx index bffac403bd6fd07d2c43f5cb824d7de2230e526b..960bbaa5d6866e9aff98403708ccf790c602561c 100644 --- a/client/src/components/SingleReview/SingleReview-view.jsx +++ b/client/src/components/SingleReview/SingleReview-view.jsx @@ -1,6 +1,7 @@ import moment from 'moment'; import PropTypes from 'prop-types'; import React from 'react'; +import ReactTooltip from 'react-tooltip'; import styled from 'styled-components'; import chain from '../../assets/chain-tick.png'; import CardWrapper from '../CardWrapper'; @@ -82,22 +83,9 @@ const ReviewFieldText = styled.span` `; const ChainIconWrapper = styled.div` - p { - display: none; - position: absolute; + .tooltip{ font-size: 10px; - text-align: center; - padding: 5px 2px; - background-color: rgba(0,0,0,0.3); - color: white; - border-radius: 5px; - opacity: 0; - transition: opacity 0.5s; - }; - :hover p { - display: inherit; - opacity: 1; - }; + } `; const ReviewField = styled(props => { @@ -127,8 +115,12 @@ export default function SingleReviewView(props) { <JournalIdLockIconWrapper> <ReviewField title='Journal ID'>{props.blockchainReview.journalId}</ReviewField> <ChainIconWrapper> - <img style={{ 'width': '35px' }} src={chain} alt='chain approved' /> - <p> Secured by bloxberg blockchain </p> + <img + style={{ 'width': '35px' }} + src={chain} + alt='chain approved' + data-tip='Secured by bloxberg blockchain' /> + <ReactTooltip className='tooltip' place='bottom' effect='solid' /> </ChainIconWrapper> </JournalIdLockIconWrapper> <ReviewField title='Publisher'>{props.blockchainReview.publisher}</ReviewField>