Tooltip in SingleReview secured by bloxberg

client/src/components/SingleReview/SingleReview-view.jsx

 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>