After struggling with this issue for some time, I attempted to use javascript to solve it but have been unsuccessful. The challenge involves a tag list in a table that displays a link when hovered over. Following advice from another member on SO, I managed to further truncate the text in order to make room for the 'x'. My end goal is to maintain the size of the pill while displaying both the truncated text and the link.
To confirm that the badge itself is causing extra white space when hovered over, I placed the relevant div and link within a border. Unfortunately, I have not been able to remove this unwanted space. Any suggestions would be greatly appreciated!
https://i.sstatic.net/UVSIp.png
html:
.badge:not(:hover)>.tag-remove {
display: none;
}
.badge:hover>.truncate {
width: 60%;
margin-left: -3px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
}
.badge:hover>.tag-remove {
color: #cc0000;
font-size: 14px;
margin-right: -1px;
white-space: nowrap;
text-decoration: none !important;
}
.badge-color {
background-color: #A4A4A4;
color: #FFFFFF;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="31535e5e45424543504171041f031f01">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="badge badge-color">
<div class='truncate'>Long Tag Title</div>
<a class="tag-remove" data-confirm="Are you sure you want to delete the tag?" data-remote="true" href="/contacts/100/remove/26">x</a>
</div>