Can a text file be loaded into the title of a Bootstrap tooltip?

Question

Can a text file be loaded into the title of a Bootstrap tooltip?

Looking to dynamically load a text file into bootstrap tooltip titles.

Here is a snippet of working code with hardcoded values:

<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>

I have a text file containing:

June
July
August

My goal is to update this text file using a script and dynamically assign these values to the tooltip titles.

I've tried using XMLHttpRequest() and $.get() methods but haven't achieved the desired result.

One attempt was:

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

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

The console logs the values correctly but the tooltip title remains empty.

Is there a better approach to achieve this? Or a way to iterate through the lines of the file?

javascript bootstrap-4 tooltip

Answer 1

Answer №1

With asynchronous ajax, your code may be injecting empty values before the call has returned. To fix this issue, try the following:

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

If you need to split the results from the file structure you provided (one month per line), you can use the following code:

$.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
    });

    // Continue adding tooltips as needed ...
});

For future reference, consider retrieving data in JSON format instead of plain text for easier handling of multiple values.

Answer 2

With asynchronous ajax, your code may be injecting empty values before the call has returned. To fix this issue, try the following:

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

If you need to split the results from the file structure you provided (one month per line), you can use the following code:

$.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
    });

    // Continue adding tooltips as needed ...
});

For future reference, consider retrieving data in JSON format instead of plain text for easier handling of multiple values.

Can a text file be loaded into the title of a Bootstrap tooltip?

Answer №1

Similar questions

What is the best way to create subpages within a survey?

Debugging Slideshows Using JavaScript

Is there a way to shade the entire webpage background in HTML?

Guide to adding the initial element in an array using Immutability Helpers

What is the best way to set the v-model property to an object that is constantly changing

Validating alpha-numeric passwords with JavaScript

Using jQuery, you can easily insert a <span> tag around selected text and then save this modification permanently in a local HTML file

What is causing the slow performance of this JavaScript array retrieval?

Toggle the div if the if statement is true; otherwise, hide the broken

Avoid re-running the onScroll function until completion

Please be patient for the PayPal script to load on the nextjs page

Attempted to create registrations for two views using the identical name RCTScrollView

What is the method for retrieving an array or object that contains a collection of files designated for uploading within the jQuery file upload plugin?

Tips for incorporating images into an `.mdx` file located outside of the `public/` directory with the `next-mdx-remote` package in Next JS

Using Vue.js to create numerous modal popups

Read and manipulate website content using PHP

What is the best way to return JSON data in a compressed (gzip) format to an Ajax Request using Java?

Tips for positioning fixed column headers at the bottom of the header row

Sending a document through the input field with React Hook Form

Managing the state in NextJS applications