Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div style={{width: '500px', position:'relative'}}>
- <Tippy
- content={
- <div>
- <h5>{clusterId}</h5>
- <p>Total Devices: {totalNodes}</p>
- <hr style={{ borderColor: 'white' }} />
- <ol style={{ textAlign: 'left', paddingLeft: '10pt' }}>
- <li>Good: {good}</li>
- <li>Need Attention: {attention}</li>
- <li>Monitor Closely: {monitor}</li>
- </ol>
- </div>
- }
- appendTo='parent'
- arrow={true}
- animation="fade"
- theme="bootstrap"
- duration={0}
- hideOnClick={false}
- >
- <div
- className="pin bounce"
- style={{ backgroundColor: color, cursor: 'pointer' }}
- onClick={handleClick}
- />
- </Tippy>
- <div className="pulse" />
- </div>
- .pin {
- width: 30px;
- height: 30px;
- border-radius: 50% 50% 50% 0;
- background: #00cae9;
- position: absolute;
- transform: rotate(-45deg);
- left: 50%;
- top: 50%;
- margin: -20px 0 0 -20px;
- }
- .pin:after {
- content: "";
- width: 14px;
- height: 14px;
- margin: 8px 0 0 8px;
- background: #e6e6e6;
- position: absolute;
- border-radius: 50%;
- }
- .bounce {
- animation-name: bounce;
- animation-fill-mode: both;
- animation-duration: 1s;
- }
- .pulse {
- background: #d6d4d4;
- border-radius: 50%;
- height: 14px;
- width: 14px;
- position: absolute;
- left: 50%;
- top: 50%;
- margin: 11px 0px 0px -12px;
- transform: rotateX(55deg);
- z-index: -2;
- }
- .pulse:after {
- content: "";
- border-radius: 50%;
- height: 40px;
- width: 40px;
- position: absolute;
- margin: -13px 0 0 -13px;
- animation: pulsate 1s ease-out;
- animation-iteration-count: infinite;
- opacity: 0;
- box-shadow: 0 0 1px 2px #00cae9;
- animation-delay: 1.1s;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement