Is there a way to dynamically set the width of a tool tip attribute in a table based on column width? I have varying column widths and would like each tool tip to match its respective column width. How can I access the data-md-tooltip attribute through JavaScript and add a style like
document.querySelector([data-md-tooltip]).style.width = "000px"[data-md-tooltip] {
position: relative;
}
[data-md-tooltip]:before {
content: attr(data-md-tooltip);
position: absolute;
/*width: 360px;*/
top: 95%;
left: 50%;
padding: 8px;
transform: translateX(-50%) scale(0);
transition: transform 0.2s ease-in-out;
transform-origin: top;
background: #232F34;
color: white;
border-radius: 2px;
font-size: 12px;
font-family: Roboto, sans-serif;
font-weight: 400;
z-index: 2;
}
[data-md-tooltip]:hover:before {
transform: translateX(-50%) scale(1);
}<td class="mdc-data-table__cell" data-md-tooltip="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since">
<div class="long-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
</div>
</td>
<hr>
<!-- Here I want different tool tip width -->
<td class="mdc-data-table__cell" data-md-tooltip="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since">
<div class="long-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since,L
</div>
</td>