JSFiddle - React, Tailwind, and code Playground

by kpagcha

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="round">
  <div class="match">
    <div class="team">
      <div class="label">Team 1</div>
      <div class="score">0</div>
      <div class="scheduling">
        <div class="wrapper">
          <span class="date">24/10/2019</span>
          &mdash;
          <span class="venue" title="Very Long Venue Name">Very Long Venue Name</span>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.round {
  margin: 40px 20px;
  background: #ededed;
  width: 150px;
}

.match {
 height: 190x;
 position: relative;
}

.team {
  width: 155px;
  height: 22px;
  background: #eee;
  position: relative;
}

.label {
  width: 120px;
  position: absolute;
}

.score {
  width: 35px;
  float: right;
}

.scheduling {
  width: 100%;
  position: absolute;
  top: 23px;
}

.scheduling > .wrapper {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

JavaScript

$('.venue').tooltip({placement: 'right', container: 'body'});