<div class="bx--tooltip bx--data-tooltip bx--tooltip--shown" data-floating-menu-direction="bottom" id="bx--data-tooltip">
	<p class="bx--data-tooltip__label">January</p>
	<ul class="bx--data-tooltip-list bx--data-tooltip-list--single">
		<li class="bx--data-tooltip-list-item bx--data-tooltip__multiple" style="border-left: 4px solid #3b1a40">
			<span class="bx--data-tooltip-list-item__label">Torchy's</span>
			<span class="bx--data-tooltip-list-item__data">$250.17</span>
		</li>
		<li class="bx--data-tooltip-list-item bx--data-tooltip__multiple" style="border-left: 4px solid #473793">
			<span class="bx--data-tooltip-list-item__label">Tacodeli</span>
			<span class="bx--data-tooltip-list-item__data">$250.17</span>
		</li>
		<li class="bx--data-tooltip-list-item bx--data-tooltip__multiple bx--data-tooltip__multiple--last" style="border-left: 4px solid #3c6df0">
			<span class="bx--data-tooltip-list-item__label">Veracruz</span>
			<span class="bx--data-tooltip-list-item__data">$250.17</span>
		</li>
	</ul>
</div>

<div class="bx--tooltip bx--data-tooltip bx--tooltip--shown" data-floating-menu-direction="top" id="bx--data-tooltip" style="left: 300px">
	<p class="bx--data-tooltip__label">January</p>
	<ul class="bx--data-tooltip-list bx--data-tooltip-list--double">
		<li class="bx--data-tooltip-list-item bx--data-tooltip__multiple bx--data-tooltip__multiple--left" style="border-left: 4px solid #3b1a40">
			<span class="bx--data-tooltip-list-item__label">Torchy's</span>
			<span class="bx--data-tooltip-list-item__data">$250.17</span>
		</li>
		<li class="bx--data-tooltip-list-item bx--data-tooltip__multiple bx--data-tooltip__multiple--left" style="border-left: 4px solid #473793">
			<span class="bx--data-tooltip-list-item__label">Tacodeli</span>
			<span class="bx--data-tooltip-list-item__data">$250.17</span>
		</li>
		<li class="bx--data-tooltip-list-item bx--data-tooltip__multiple bx--data-tooltip__multiple--left" style="border-left: 4px solid #3c6df0">
			<span class="bx--data-tooltip-list-item__label">Veracruz</span>
			<span class="bx--data-tooltip-list-item__data">$250.17</span>
		</li> 
		<li class="bx--data-tooltip-list-item bx--data-tooltip__multiple bx--data-tooltip__multiple--right" style="border-left: 4px solid #00a68f">
			<span class="bx--data-tooltip-list-item__label">Pueblo Viejo</span>
			<span class="bx--data-tooltip-list-item__data">$250.17</span>
		</li>
		<li class="bx--data-tooltip-list-item bx--data-tooltip__multiple bx--data-tooltip__multiple--right" style="border-left: 4px solid #48d4bb">
			<span class="bx--data-tooltip-list-item__label">Las Trancas</span>
			<span class="bx--data-tooltip-list-item__data">$250.17</span>
		</li>
		<li class="bx--data-tooltip-list-item bx--data-tooltip__multiple bx--data-tooltip__multiple--right bx--data-tooltip__multiple--last" style="border-left: 4px solid #9b82f3">
			<span class="bx--data-tooltip-list-item__label">Taco Joint</span>
			<span class="bx--data-tooltip-list-item__data">$250.17</span>
		</li>
	</ul>
</div>

body {
	padding: 2rem 3%;
}

.bx--data-tooltip {
  padding: 0;
	width: min-content;
	max-width: none;
}

.bx--data-tooltip__label {
  width: 100%;
  height: 32px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: #5a6872;
  padding: 0 1rem;
  white-space: nowrap;
  border-bottom: 1px solid #dfe3e6;
}

.bx--data-tooltip-list-item {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
	width: -webkit-fill-available;
}

.bx--data-tooltip-list-item__data {
  font-weight: 600;
  background-color: #ffffff;
  z-index: 2;
}

.bx--data-tooltip-list-item__label {
  color: #5a6872;
  font-size: 12px;
	white-space: nowrap;
}

.bx--data-tooltip-list-item__data,
.bx--data-tooltip-list-item__label {
  display: inline-block;
}

.bx--data-tooltip__base {
  min-height: 1.625rem;
  padding: 0 0.625rem;
}

.bx--data-tooltip__single {
  min-height: 2.625rem;
  padding: 0 0.625rem;
}

.bx--data-tooltip__multiple {
  margin: 0.5rem 1rem;
  min-height: 2rem;
  padding-left: 0.5rem;
}

.bx--data-tooltip__multiple--last {
  margin-bottom: 1rem;
}

.bx--data-tooltip__multiple--right {
  margin-left: 0;
}

.bx--data-tooltip__multiple--left {
  margin-right: 0;
}

.bx--data-tooltip-list--single {
	display: flex;
	flex-direction: column;
	column-count: 1;
	column-gap: 1.25rem;
}

.bx--data-tooltip-list--double {
	column-count: 2;
	column-gap: 1.25rem;
}