CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstraptwitter-bootstrap-3
Geoff
Geoff

Reputation: 2491

How can I add interactive content to a Bootstrap popover?

I have a website that displays a big amMap. The map doesn't need to be visible all the time, so I want to hide the map and only display it when a user clicks a button. Bootstrap's popover seems like the perfect way to handle this.

Here's the basic idea:

<button id="mapbutton" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right">Map</button>
<div id="mapcontent" style="display: none;">
    <div id="map" style="width: 500px; height: 500px;"></div>
</div>

$(function() {
    $('#mapbutton').popover({
        html: true,
        content: function() {
            return $('#mapcontent').html();
        }
    });
});

Here's what I see:

screenshot

I have 2 problems:

  1. The displayed map is not interactive. I can't click on it. It looks like a static picture. I'm not sure how to get it interactive. None of the popover options look like they'll fix the interactivity issue.
  2. The tooltip window doesn't scale appropriately. I'm guessing there's some CSS stuff I've gotta do to fix this.

How can I solve these problems?

Upvotes: 0

Views: 2023

Answers (1)

Andre Figueiredo
Andre Figueiredo

Reputation: 13425

Question 1

Bind the events after popover content be loaded, using event shown.bs.popover:

    $('#mapbutton').on('shown.bs.popover', function () {
        $('#mapMinus').click(MyMap.ZoomOut);
        $('#mapPlus').click(MyMap.ZoomIn);
        $('#mapLeft').click(MyMap.GoLeft);        
        [...]
    })

** UPDATE:

Creating your own "popover", by reusing bootstrap classes:

<a id="mypopover">
    Lorem Ipsum    
</a>
<div id="popoverContent" class="popover fade bottom in">
    <div class="arrow" style="left: 9.375%;"></div>
    <div class="popover-content">
        <a id="clickmewouldntwork">Event: Click me! (after load page, not binding after popover)</a>
        <div id="gotit"></div>
    </div>
</div>

CSS:

.popover {
    max-width: none;
    top: 20px;
}

JS:

$('#clickmewouldntwork').click(function(){
    $('#gotit').append('#');
});

$('#mypopover').click(function(){
    var $target = $('#popoverContent');
    $target.toggle(!$target.is(':visible'));
});

See fiddle

Question 2

You have to overwrite bootstrap .popover { max-width: 276px; }:

     .popover {
          max-width: none;
     }

See fiddle

Upvotes: 1

Related Questions