我正在尝试在引导工具提示中显示通过JsBarcode生成的条形码图像。
我尝试过的事情:
我尝试在JsBarcode js代码前后的Tooltip js代码中移动。
我已经在网上搜索了类似内容,但是唯一类似于解决方案的事情是在btn点击时触发JsBarcode代码,并在页面加载时触发bootstrap工具提示。这对我不起作用。我一直想在页面加载时都对它们进行初始化,以便工具提示能够正常工作。
HTML:
<a id="SellerSKU_ToolTip" data-toggle="tooltip" data-html="true" data-placement="bottom" class="White-tooltip" title="<svg id='Barcode_Seller_SKU'></svg>">123456789012</a></td>
JS代码:
$(document).ready(function () {
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
JsBarcode("#Barcode_Seller_SKU", "1234", {
format: "auto",
lineColor: "#0aa",
width: 2,
height: 25,
displayValue: true
});
}
错误:
JsBarcode.all.min.js:3 Uncaught TypeError: r.options(...)[n.format] is not a function
at j (JsBarcode.all.min.js:3)
at HTMLDocument.eval (eval at globalEval (jquery.min.js:2), <anonymous>:11:9)
at j (jquery.min.js:2)
at Object.add [as done] (jquery.min.js:2)
at n.fn.init.n.fn.ready (jquery.min.js:2)
at eval (eval at globalEval (jquery.min.js:2), <anonymous>:2:17)
at eval (<anonymous>)
at Function.globalEval (jquery.min.js:2)
at n.fn.init.domManip (jquery.min.js:3)
at n.fn.init.append (jquery.min.js:3)
j @ JsBarcode.all.min.js:3
(anonymous) @ VM200:11
如果有任何帮助或建议,我将不胜感激。
答案 0 :(得分:1)
这里的错误是因为您的代码:
JsBarcode("#Barcode_Seller_SKU", "1234", {
期望SVG元素可以在准备就绪的文档中出现。
但是,由于工具提示内容是在元素悬停时动态生成的,因此,您希望将其变成条形码的SVG元素只有在悬停在锚定元素上之后才可用。
您可以使用Bootstrap的工具提示显示事件来创建条形码。像这样:
$(function() {
var tt = $('[data-toggle="tooltip"]').tooltip({
placement: "right"
});
tt.on("shown.bs.tooltip", function() {
JsBarcode("#Barcode_Seller_SKU", "123456789012", {
format: "EAN13",
lineColor: "#0aa",
width: 2,
height: 25,
displayValue: true
});
});
});
.tooltip-inner { max-width: none !important; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
<a id="SellerSKU_ToolTip" data-toggle="tooltip" data-html="true" data-placement="bottom" class="White-tooltip" title="<svg id='Barcode_Seller_SKU'></svg>">123456789012</a>