JSFiddle - React, Tailwind, and code Playground

by nithyanandam venu

HTML

<div class="headerDetail section">
  <p> ${d.parent} > </p>
  <h4> ${d.driver} </h4>
</div>
<div class="infoDetails section">
  <h5> Value </h5>
  <div class="valueDetails">
    <div class="lowSection">
      <p class="type"> Low </p>
      <p class="value"> ${self.chartOptions.formatter(d,d.low,'value')} </p>
    </div>
    <div class="baselineSection">
      <p class="type"> Baseline </p>
      <p class="value"> ${d3.format(".2s")(self.chartOptions.baseLineValue)} </p>
    </div>
    <div class="highSection">
      <p class="type"> High </p>
      <p class="value"> ${self.chartOptions.formatter(d,d.high,'value')} </p>
    </div>
  </div>
  <div class="childrenDetail" style="display:${d.node._children ? 'block': 'none'}">
    <h5> Children </h5>
    <p> ${self.chartOptions.formatter(d,null,'children')} </p>
    <p class="link"> Show more </p>
  </div>
  <div class="calculationDetail" style="display:${d.node.formula !== '' ? 'block': 'none'}">
    <h5> Calculation </h5>
    <p> ${self.chartOptions.formatter(d,null,'formula')} </p>
  </div>
</div>

CSS

.tooltip {
  width: 250px;
  background-color: #FFFFFF;
  font-family: Arial, Helvetica, sans-serif;
  position:absolute;
  -webkit-box-shadow: -5px 4px 12px 0px #CCCCCC; 
  box-shadow: -5px 4px 12px 0px #CCCCCC;  
}

.headerDetail p,.childrenDetail p,.calculationDetail p{
  font-size: 12px;
}

.tooltip h4{
  margin-top:4px;
  margin-bottom:10px;
  font-size:17px;
  font-weight:lighter;
}

.tooltip .section {
  margin-left: 4%;
  margin-right: 2%;
}

.tooltip .baselineSection{
  display:none;
}

.valueDetails {
  display: flex;
  justify-content: space-between;
  margin-right:5%;
}