Using Bootstrap Popover To Show Result In It

This is the code to get temperature of London from Open weather API. It works fine

Solution 1:

Use the Popover's Options to beautify your popover. Using these options you can have complete control over the functionality and appearance of your popover.

http://getbootstrap.com/javascript/#popovers-usage

This fiddle only demonstrates a few of these options...

Js Code

$(document).ready(function(){
        $(".popover-examples a").popover({
            title : 'Weather App',
            trigger: 'hover',
            template: '<divclass="popover"><divclass="arrow"></div><h3class="popover-title"></h3><divclass="popover-content"></div><imgsrc="http://lorempixel.com/100/100" /><span>Just an example of inserting image in a Popover...</span></div>'
        });
    });

HTML

<divclass="bs-example"><pclass="popover-examples"><ahref="#"class="btn btn-lg btn-primary"data-toggle="popover" >Popover Example</a></p></div>

Solution 2:

Checkout this demo.

functionfoo() {
    $.ajax({
        url: "http://api.openweathermap.org/data/2.5/weather?q=London",
        dataType: 'JSON',
        success: function(result) {
            var temp = JSON.stringify(JSON.parse(result.main.temp));
            varKelvin = 272;
            varCentigrade = temp-Kelvin;
            var temperature = "Temperature : "+Math.round(Centigrade)+" C";
            $('span.temp-val').text(temperature);
        }
    });
}

$(document).ready(function(){
    $(".popover-examples a").popover({
        title : 'Weather App',
        trigger: 'hover',
        template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div><img src="http://lorempixel.com/100/100" /><span class="temp-val">Just an example of inserting image in a Popover...</span></div>'
    });

    $(".popover-examples a").hover(function() { foo(); })
});

You need to call the ajax function at hovering the trigger element. Also, set an identifier for the temperature in your template - this way you can set it to the obtained value using the ajax call.