JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<br><br><br><br><ul class="booth26_34">
						<li class="tooltips"><input type="radio" value="26" name="booth_nr" disabled=""><span>AIT Austrian Institute of Technology</span></li>
						<li class="tooltips"><input type="radio" value="27" name="booth_nr" disabled=""><span>AIT Austrian Institute of Technology</span></li>
						<li class="tooltips"><input type="radio" value="28" name="booth_nr"><span>Booth nr: 28</span></li>
						<li class="tooltips"><input type="radio" value="29" name="booth_nr"><span>Booth nr: 29</span></li>
						<li class="tooltips"><input type="radio" value="30" name="booth_nr"><span>Booth nr: 30</span></li>
						<li class="tooltips"><input type="radio" value="31" name="booth_nr"><span>Booth nr: 31</span></li>
						<li class="tooltips"><input type="radio" value="32" name="booth_nr"><span>Booth nr: 32</span></li>
						<li class="tooltips"><input type="radio" value="33" name="booth_nr"><span>Booth nr: 33</span></li>
						<li class="tooltips"><input type="radio" value="34" name="booth_nr"><span>Booth nr: 34</span></li>
					</ul>

CSS

li.tooltips {
    border: 1px solid #FF0000;
    display: inline-block;
    position: relative;
    text-align: center;
    vertical-align: middle;
}
li.tooltips span {
    background: none repeat scroll 0 0 #000000;
    border-radius: 6px;
    bottom: 30px;
    color: #FFFFFF;
    display: block !important;
    font-weight: bold;
    line-height: 30px;
    padding: 10px;
    position: absolute;
    text-align: center;
    visibility: hidden;
    white-space: nowrap;
    width: auto;
    left: -52px;
}
li.tooltips span:after {
    border-left: 8px solid rgba(0, 0, 0, 0);
    border-right: 8px solid rgba(0, 0, 0, 0);
    border-top: 8px solid #000000;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    top: 100%;
    width: 0;
}
li.tooltips:hover span {
    opacity: 0.8;
    visibility: visible;
    z-index: 999;
}
li.tooltips:first-child span {
    left: -133px;
}
li.tooltips:nth-child(2) span {
    left: -135px;
}