SVG flyout

by samih

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script>
<div class="main-container">
    <button>Click Me</button>
    <div class="flyout-container" style="display: none;" >
        <svg class="flyout" >
            <path d="M110 20.5 
                    L195 20.5
                    Q200 20.5 200 25
                    L200 215 
                    Q200 219.5 195 219.5
                    L5 219.5
                    Q0 220 0 215
                    L0 25
                    Q0 20.5 5 20.5
                    L90 20.5
                    L100 0 
                    Z" />
        </svg>
        <div class="flyout-content">Testing HTML content within the flyout. This is actually a separate container positioned over the SVG element.</div>
    </div>
</div>
There is some text underneath this flyout.</br/>
It helps you to see the transparency effect.

CSS

@flyoutHeight: 200px;
@arrowHeight: 20px;

.main-container {
    position: relative;
    margin-left: 80px;

    .flyout-container {
        box-sizing: border-box;
        position: absolute;
        top: 25px;
        left: -60px;
        width: 200px;
        height: @flyoutHeight + @arrowHeight + 1;
    }
    
    .flyout, .flyout-content {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .flyout-content {
        box-sizing: border-box;
        top: @arrowHeight;
        height: @flyoutHeight;
        padding: 5px;
        box-shadow: 0 1px 3px 1px rgba(0,0,0,0.15);
        border-radius: 5px;
    }
    
    path {
        stroke-width: 1;
        stroke: black;
        fill: rgba(250,250,250,0.85);
    }
}

body {
    width: 100%;
    height: 100%;
    background-color: lightblue;
}

JavaScript

/**
    LESS SHIM
*/
(function(){ $('head style[type="text/css"]').attr('type', 'text/less');less.refreshStyles(); }());

$('.main-container button').on('click', function(event){
    $('.flyout-container').toggle();
});