Popover codes | Community Development | Sandbox ConnAct

Add below to HTML or richt text widget.

<a href="#" class="popover-link" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="" data-original-title="Popover on top">Popover on top</a>
<a href="#" class="popover-link" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="" data-original-title="Popover on right">Popover on right</a>
<a href="#" class="popover-link" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="" data-original-title="Popover on bottom">Popover on bottom</a>
<a href="#" class="popover-link" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="" data-original-title="Popover on left">Popover on left</a>

<script>
$('.popover-link').popover()
</script>

add to css override:

.my-custom-page .popover{background-color: #08c;}

Change color to your liking

Add class to page atributes or widget code

en voor plaatje in pop-over onderstaande code

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap.</p>

<p><a class="popover-link" href="#" title="" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="Popover on right" data-img="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">Popover on right</a></p> <p>

<script> $('.popover-link').popover({ html: true, content: function(){ return '<img src="'+$(this).data('img')+'">'; } }) </script> </p>