Help Popovers

Submitted by herent - 3 years ago

Often it's good to provide extra feedback for users when they edit your block. But real estate is limited. You can use some built-in hooks to create slick popups with very little effort. This uses bootstrap for the styling and display. If you want an icon that's not a (?) then check out the other options here: http://bootstrapdocs.com/v2.0.3/docs/base-css.html#icons You can use this outside of blocks, too. In fact pretty much anywhere you have an a tag you can do it. And not just for help. The user does have to be logged in for it to work.

<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<div class="control-group">
    <label for="maxHeight" class="control-label">
        <?php echo t("Max Height"); ?>
        <a id="block-help-max-height" 
           href="javascript:void(0)"
           data-toggle="popover"
           data-placement="right"
           data-original-title="<?php echo t("Max Height"); ?>"
           data-content="<?php
           echo
           t("This is the maximum height of the content parsed from the URL. "
                   . "<br /><br />If the theme applies padding or borders to the outer div "
                   . "or images, etc, it may end up taking up more space in the "
                   . "theme than expected.");
           ?>"
           class="myblock-help">
            <i class="icon-question-sign"></i>
        </a>
    </label>
    <div class="controls">
<?php echo $form->text("maxHeight", $maxHeight); ?>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $(".myblock-help")
                .popover({ html: true})
                .click(function(e) {
                        e.stopPropagation();
                });
    });
</script>
Stats Categories Tags
comments powered by Disqus