When displaying text within a span element inside a fixed-width structure, I want to use ellipsis if the text overflows. To show the full text, I have initialized a Bootstrap tooltip in these elements. However, the tooltip is visually misplaced due to the full width of the span. How can I adjust the width so that the tooltip appears correctly?
Here is a working snippet: (fiddle link).
$('.venue').tooltip({
placement: 'right',
container: 'body'
});@import("https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.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;
}<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/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> —
<span class="venue" title="Very Long Venue Name">Very Long Venue Name</span>
</div>
</div>
</div>
</div>
</div>