动态扩展动态加载的DIV的宽度(Dynamically expanding width of a dynamically loaded DIV)

我创建了一个基于服务器端数据动态加载的工具提示。它一直运作良好，直到我得到更大的SKU。现在有溢出。

我正在尝试使用CSS或JS动态更改宽度以消除溢出，如此小提琴所示。

我的HTML：

<div class="ext-tooltip 12345-789-1456789-431535" data-sku="12345-789-1456789-431535"> <div class="tooltip-stock">12345-789-1456789-431535 :: 5</div> </div> <div id="invoice-lines"> <div id="progress-container" class="hide" style="display: none;"> <div class="progress-bar-container"> <div id="progress-bar" class="progress-bar-progress" style="width: 100%;"></div> </div> <div class="example ta_center">Loading...</div> </div> <table cellspacing="0" id="invoice-time" class="invoice-lines spreadsheet" style="display:none"></table>

我的CSS：

.ext-tooltip { display: inline-block; background: url(//cdn.shopify.com/s/files/1/0059/3992/t/14/assets/oem-icon.png?17543244824127338148) -78px 0 no-repeat; font-family: Arial, sans-serif; padding: 0 10px 7px 3px; margin-left: 3px; line-height: 22px; overflow: hidden; color: black; font-weight: normal; font-size: 9pt; }

我的JS：

var $tooltip = $('.ext-tooltip.12345-789-1456789-431535'); $tooltip.innerWidth($('.tooltip-stock', $tooltip).innerWidth());

这样做的正确方法是什么？

I've created a tooltip that is loaded dynamically based on server side data. It's been working well until I got to much larger SKUs. Now there is overflow.

I'm trying to use either CSS or JS to dynamically change the width to eliminate the overflow as shown in this fiddle.

My HTML:

<div class="ext-tooltip 12345-789-1456789-431535" data-sku="12345-789-1456789-431535"> <div class="tooltip-stock">12345-789-1456789-431535 :: 5</div> </div> <div id="invoice-lines"> <div id="progress-container" class="hide" style="display: none;"> <div class="progress-bar-container"> <div id="progress-bar" class="progress-bar-progress" style="width: 100%;"></div> </div> <div class="example ta_center">Loading...</div> </div> <table cellspacing="0" id="invoice-time" class="invoice-lines spreadsheet" style="display:none"></table>

My CSS:

.ext-tooltip { display: inline-block; background: url(//cdn.shopify.com/s/files/1/0059/3992/t/14/assets/oem-icon.png?17543244824127338148) -78px 0 no-repeat; font-family: Arial, sans-serif; padding: 0 10px 7px 3px; margin-left: 3px; line-height: 22px; overflow: hidden; color: black; font-weight: normal; font-size: 9pt; }

My JS:

var $tooltip = $('.ext-tooltip.12345-789-1456789-431535'); $tooltip.innerWidth($('.tooltip-stock', $tooltip).innerWidth());

What's the correct way to do this?