Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to use twitter bootstrap popover for dynamic content

I want to show google map on popover

But the popover fails to change map

Only works when the map is fixed

My code :

$(function(){

// getmap function from http://stackoverflow.com/questions/10545768/google-map-in-twitter-bootstrap-popver
var getMap = function(opts) {
  var src = "http://maps.googleapis.com/maps/api/staticmap?",
  params = $.extend({
    center: 'New York, NY',
    zoom: 14,
    size: '512x512',
    maptype: 'roadmap',
    sensor: false
  }, opts),
  query = [];

  $.each(params, function(k, v) {
query.push(k + '=' + encodeURIComponent(v));
  });

  src += query.join('&');
  return '<img src="' + src + '" />';
}



$('.map').click(function(){
    location = $(this).text();
    $("#map").html(getMap({center: location}));
    });


$('.map').popover({trigger:'click',placement:'left',html:true,content:function(){
    return $("#map").html();
    }});    

    });

My problem with this function :

$('.map').click(function(){...});

With Click on the link(.map) because the #map is changed, the popover is broken and does not work

Thank you

like image 870
ali smith Avatar asked Mar 15 '13 16:03

ali smith


People also ask

How do you use bootstrap Popovers?

To create a popover, add the data-toggle="popover" attribute to an element. Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.

How do I customize bootstrap popover?

To create a popover, you need to add the data-bs-toggle="popover" attribute to an element. Whereas, popover's title and its content that would display upon trigger or activation can be specified using the title and data-bs-content attribute respectively. Here is the standard markup for adding a popover to a button.

What is the difference between Tooltip and popover?

Tooltip: use tooltips to show a short text to respondents when they hover over a word or icon. Popover: use popovers to show a longer text, or when you want to have a link to an external web page. It is shown when the respondent clicks on a word or icon.


1 Answers

I don't think you need to do it in two separate steps (click then popover), nor do you need the div unless there's some reason for that which you haven't mentioned. This works for me:

JavaScript:

$('.map').popover({trigger:'click',placement:'left',html:true,content:function(){
     return getMap({center: $(this).text()})
  }});    
});

You can then remove the center: 'New York, NY', line from your getMap params.

HTML:

<a href="#" class="map">New York, NY</a>

If you were using the #map div to make the popover larger, just change the CSS of the popover instead, by doing something like:

.popover { width: 512px; height: 512px; }

I would recommend using a more specific selector for that though, otherwise it will affect popovers elsewhere on your site.

like image 105
frostyterrier Avatar answered Oct 12 '22 15:10

frostyterrier