---
layout: default
title: Popovers · Ghost UI
---

<header class="page-header">
    <a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
    <h2>Popovers</h2>
</header>

<section class="page-content" style="padding: 5%; text-align: center;">

    <h1>Popovers</h1>

    <hr>

   <div class="popover-item popover-triangle-bottom">
        <div class="popover-title">URL Structure Formatting</div>
        <div class="popover-desc">You can use dynamic variables in this field.</div>
        <div class="popover-body">
            <p>
                <b>%t</b> - The title of your post (or page)<br>
                <b>%c</b> - The tag which your post is categorised in<br>
                <b>%y</b> - The year your post was published<br>
                <b>%m</b> - The month your post was published<br>
                <b>%d</b> - The day your post was published
            </p>
        </div>
    </div>

    <hr>

    {% assign popover_classes = "popover-triangle-top|popover-triangle-top-left|popover-triangle-top-right|popover-triangle-bottom|popover-triangle-bottom-left|popover-triangle-bottom-right|popover-triangle-right|popover-triangle-right-top|popover-triangle-right-bottom|popover-triangle-left|popover-triangle-left-top|popover-triangle-left-bottom" | split: "|" %}
    {% for item in popover_classes  %}
        <div class="popover">
            <span class="label label-default hover-me">{{item}}</span>
            <div class="popover-item closed {{item}}">
                <div class="popover-title">URL Structure Formatting</div>
                <div class="popover-desc">You can use dynamic variables in this field.</div>
                <div class="popover-body">
                    <p>
                        <b>%t</b> - The title of your post (or page)<br>
                        <b>%c</b> - The tag which your post is categorised in<br>
                        <b>%y</b> - The year your post was published<br>
                        <b>%m</b> - The month your post was published<br>
                        <b>%d</b> - The day your post was published
                    </p>
                </div>
            </div>
        </div>
        <br><br>
    {% endfor %}
    <br>
    <br>
    <br>
    <br>
    <br>

</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(function(){
        $(".hover-me").hover(function(){
            $(this).next(".popover-item").addClass("open fade-in").removeClass("closed fade-out");
        }, function(){
            $(this).next(".popover-item").removeClass("fade-in").addClass("fade-out");
            $(this).next(".popover-item").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function (event) {
                if (event.originalEvent.animationName === 'fade-out') {
                    $(this).removeClass("open fade-out").addClass("closed");
                }
            });
        });
    });
</script>