[英]Cant get a bootstrap tooltip to display an image created in JS
I am trying to display a barcode image that is generated via JsBarcode inside a bootstrap tooltip.我正在尝试在引导工具提示中显示通过 JsBarcode 生成的条形码图像。
What I have tried:我试过的:
I tried to move around the Tooltip js code in front and behind the JsBarcode js code.我试图在 JsBarcode js 代码前后移动 Tooltip js 代码。
I have searched for anything similar online but the only thing that somewhat resembles a solution is to trigger the JsBarcode code on a btn click and the bootstrap tooltip on page load.我已经在网上搜索过任何类似的东西,但唯一有点类似于解决方案的是在 btn 单击时触发 JsBarcode 代码和在页面加载时触发引导工具提示。 This doesn't work for me.这对我不起作用。 I was looking for both to be initialized on page load so that the tooltip would work.我正在寻找在页面加载时初始化两者,以便工具提示能够工作。
HTML: 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 Code: JS代码:
$(document).ready(function () {
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
JsBarcode("#Barcode_Seller_SKU", "1234", {
format: "auto",
lineColor: "#0aa",
width: 2,
height: 25,
displayValue: true
});
}
The error:错误:
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
I would be grateful for any help or advice.我将不胜感激任何帮助或建议。
The error here is because your code:这里的错误是因为您的代码:
JsBarcode("#Barcode_Seller_SKU", "1234", {
is expecting the SVG element to be present on document ready.期望 SVG 元素出现在文档准备就绪上。
But since the tooltip content is generated dynamically on-hover of the element, the SVG element you're expecting to make into a barcode would only be available after you hover over the anchor element.但是由于工具提示内容是在元素悬停时动态生成的,因此您希望制作成条形码的 SVG 元素只有在您将 hover 放在锚元素上之后才可用。
You can use Bootstrap's tooltip on-show event to create your barcode.您可以使用 Bootstrap 的工具提示 on-show 事件来创建您的条形码。 Something like this:像这样的东西:
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.