<a href="#" id="showCollout1" class="btn btn-secondary">Callout Bottom </a>
<joomla-callout action="hover" for="#showCollout1" dismiss="true" position="bottom">
<div class="callout-title">Title</div>
<div class="callout-content">
Message body is optional. If help documentation is available, consider adding a link to learn more
</div>
<div class="callout-footer">
<a href="#" class="callout-link" target="blank">Learn more</a>
</div>
</joomla-callout>