Не могу получить всплывающую подсказку для отображения изображения, созданного в JS - PullRequest
Новая
       46

Не могу получить всплывающую подсказку для отображения изображения, созданного в JS

0 голосов
/ 26 сентября 2019

Я пытаюсь отобразить изображение штрих-кода, которое генерируется с помощью JsBarcode, во всплывающей подсказке.

Что я пробовал:

  1. Я пытался передвигаться по js-коду подсказки спереди и сзади js-кода JsBarcode.

  2. Я искал что-то похожее в Интернете, но единственное, что несколько напоминает решение, - это вызватьКод JsBarcode при нажатии кнопки btn и всплывающая подсказка при загрузке страницы.Это не работает для меня.Я искал обе инициализации при загрузке страницы, чтобы всплывающая подсказка работала.

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

Буду признателен за любую помощь или совет.

1 Ответ

1 голос
/ 26 сентября 2019

Ошибка здесь заключается в том, что ваш код: 

JsBarcode("#Barcode_Seller_SKU", "1234", {

ожидает, что элемент SVG будет присутствовать в готовом документе.

Но поскольку подсказка генерируется динамически при наведении наэлемент, элемент SVG, который вы ожидаете превратить в штрих-код, будет доступен только после того, как вы наведете указатель мыши на элемент привязки.

Вы можете использовать событие on-show всплывающей подсказки 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>
...