How can I add interactive content to a Bootstrap popover?


Tags: javascript,jquery,css,twitter-bootstrap,twitter-bootstrap-3

Problem :

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?



Solution :

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


    CSS Howto..

    How to move box-shadow?

    how to trigger a stored property with css color change?

    How to add an icon to a button at the bottom right corner

    How to tell what in CSS files that is not used? [duplicate]

    How to change css style of Kendo Combobox

    How can I create an inline grouped listview in windows 8

    How to use icon fonts

    Bootstrap css navbar-inverse dropdown how to change color of checkbox label text

    How to make an image always load in the center of page?

    How can I create a DIV that expands UP TO a height and then shows a scrollbar?

    how to text zoom effect in css

    How to show hidden content when hover in CSS not working

    How to Get Fixed Children to Play Nicely with their Parents

    How do I use css transitions to scale an image and move it at the same time?

    Ruby Command Line: How can I send the CTRL-C command via text in the command line?

    How to stop DIVS from colliding when page resized (footer)?

    How to Make Text Black on .mouseover

    How to style unordered lists in CSS as comma separated text

    How can I make these CSS absolute positions work in IE?

    Integration of CSS, Javascript and html ,,,howto

    How to make link color change based on location on page?

    How to make Gravity Forms Responsive (left/right )?

    How to make a wavy border line to separate background images in html5/css?

    How to convert shorthand CSS to longhand?

    How do I get rid of the last tr td bottom border using css?

    How to write a responsive semantic HTML5 page ? (With a framework ?)

    How to Center-Justify links in CSS?

    How to make a whole 'div' clickable in html and css without javascript? [duplicate]

    How to move this structure to the right without using float?

    I can't figure out how to stop the margin-top from making my child div overflow its parent