Confused about popovers
Permalink
Concrete5 v. 8.5.1 using a Bootstrap 3 based theme
Hiya,
The site I'm building has a few images which will need clickable areas and popovers.
I've managed to get image maps working by usinghttp://image-map.weebly.com/ and imageMapResizer.js
I want the popovers to be dismissable, of course, so I used:
data-trigger="focus"
so they will disappear on the next click.
Problem 1:
I have read on Bootstrap3 docs that the settings need to be within an <a> tag for cross-browser compliance but digging through the forums I saw an example where the person had simply put the popover settings within the <area> tag of the image map.
so should I be using this:
or this:
Problem 2:
Positioning of the popovers - I used an HTML block to add the image and corresponding image map. The popovers all appear on the right hand side of the image in a very narrow box. I tried adding data-container="body" in the settings here but it hasn't made any difference.
In my CSS I have this:
My footer contains:
I've attached 2 .pngs to show what's happening.
I may need to use modals for some of the other images as the amount of content is much more.
Does anyone have any experience of using popovers/modals along with image maps? I'd really appreciate a few pointers.
Many thanks
Allison :)
Hiya,
The site I'm building has a few images which will need clickable areas and popovers.
I've managed to get image maps working by usinghttp://image-map.weebly.com/ and imageMapResizer.js
I want the popovers to be dismissable, of course, so I used:
data-trigger="focus"
so they will disappear on the next click.
Problem 1:
I have read on Bootstrap3 docs that the settings need to be within an <a> tag for cross-browser compliance but digging through the forums I saw an example where the person had simply put the popover settings within the <area> tag of the image map.
so should I be using this:
<a data-content="Map 1 text map 1 text" data-placement="top" data-toggle="popover" data-trigger="focus" role="button" tabindex="0" title="MAP 1" ><area shape="rect" coords="494, 171, 699, 284" /></a>
or this:
<area data-content="Map 2 text map 2 text" data-placement="top" data-toggle="popover" data-trigger="focus" role="button" tabindex="0" title="MAP 2" shape="rect" coords="30, 171, 211, 284" />
Problem 2:
Positioning of the popovers - I used an HTML block to add the image and corresponding image map. The popovers all appear on the right hand side of the image in a very narrow box. I tried adding data-container="body" in the settings here but it hasn't made any difference.
In my CSS I have this:
.popover{ max-width: 100%; }
My footer contains:
<!-- Enable popovers --> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover({ container: 'body' }); }); </script>
I've attached 2 .pngs to show what's happening.
I may need to use modals for some of the other images as the amount of content is much more.
Does anyone have any experience of using popovers/modals along with image maps? I'd really appreciate a few pointers.
Many thanks
Allison :)
