Можно ли загрузить текстовый файл в bootstrap заголовок всплывающей подсказки?

Question

Я хочу загрузить текстовый файл в заголовок всплывающей подсказки bootstrap.

Это часть моего кода, работающего с простыми значениями:

<div>
    <a id="A" type="button" class="btn btn-outline-secondary btn-lg" data-toggle="tooltip" dataplacement="bottom" href="Some action"> A</a>
    <a id="B" type="button" class="btn btn-outline-secondary btn-lg" data-toggle="tooltip" dataplacement="bottom" href="Some action"> B</a>
    <a id="C" type="button" class="btn btn-outline-secondary btn-lg" data-toggle="tooltip" dataplacement="bottom" href="Some action"> C</a>
</div>

<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    });

    $('#A').tooltip({
        title: "June"
    });
    $('#B').tooltip({
        title: "July"
    });
    $('#C').tooltip({
        title: "August"
    });
</script>

У меня есть текстовый файл с:

June
July
August

Этот текстовый файл будет обновлен некоторым скриптом, и я пытаюсь «динамически» поместить эти 3 значения в свои 3 заголовка всплывающих подсказок.

Я пробовал несколько вещей с XMLHttpRequest () или $ .get (), но у меня нет правильного результата.

Например, я пробовал:

function(Atooltip(node) {
    $.get("My text File", function(responseText) {
        var Month = responseText;
    });
    console.log(Month);
    return Month;
}

$('#A').tooltip({
    title: Atooltip
});

Журнал консоли возвращает:

June
July
August

Но заголовок моей всплывающей подсказки пуст.

Есть ли лучший способ сделать это?

Или, возможно, способ заставить al oop делать строки дерева файла в ряд?

Answer 1

ajax является асинхронным, с вашим кодом вы вводите значение до того, как вызов фактически вернул его, поэтому оно пустое. Попробуйте с помощью

 $.get("My text File", function (responseText) {
        var Month = responseText;
        console.log(Month);
    }).done(function (Month) {
        console.log(Month);
        $('#A').tooltip({
            title: Month
        });
    });

Чтобы разделить результаты, учитывая структуру файла, которую вы опубликовали (один месяц на строку), вы можете:

$.get("My text File", function (responseText) {
    let Months = responseText.split("\n");
    // Months is now an array -> ["June", "July", "August"]
}).done(function (Month) {
    console.log(Month);

    $('#A').tooltip({
        title: Month[0] // June
    });
    
    $('#B').tooltip({
        title: Month[1] // July
    });

    // Keep going as much as you need ...
});

В будущем подумайте о том, чтобы получить json insteaed обычного текста, чтобы было легче назначить несколько значений.