jquery.mb.balloonは任意の要素にバルーンチップを追加するためのjQueryプラグイン。

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="inc/jquery.mb.balloon.js"></script>
    <script>
        $(function () {
            var isIframe=function(){var a=!1;try{self.location.href!=top.location.href&&(a=!0)}catch(b){a=!0}return a};if(!isIframe()){var logo=$("<a href='http://pupunzi.com/#mb.components/components.html' style='position:absolute;top:50px;z-index:1000'><img id='logo' border='0' src='http://pupunzi.com/images/logo.png' alt='mb.ideas.repository'></a>");$("body").prepend(logo),$("#logo").fadeIn()}
            jQuery.balloon.init();
            setTimeout(function(){
                $("#balloon2").showBalloon();
            },10);
            $(".opener").each(function(){
                var el = $(this);
                el.showCode(el);
            });
        });
        function printOutHTML(el){
            var html = el[0].outerHTML;
            html=html.replace(/</g,"&lt;");
            html=html.replace(/>/g,"&gt;");
            return html;
        }
        function canClose(balloon) {
            var input = balloon.find("input");
            if (input.val().length > 0)
                return confirm("Sure you want to close this balloon?");
            else
                return true;
        }
        $.fn.showCode = function(el){
            return this.each(
                    function(){
                        var msg = "";
                        var data = el.data();
                        var c = 1;
                        for(var x in data){
                            msg += "<b>data-" + x + "</b> = " + data[x];
                            msg += ", ";
                            c++;
                        }
//                        var msg = el.data().toString(); // printOutHTML(el)
                        var element = $("<div/>").append(msg).css({fontSize: "10px", marginTop:10});
                        $(this).append(element);
                    }
            )
        }
    </script>

    <div id="balloon1" class="opener box" data-balloon= "To close me you've to click on the x" data-position="up" data-addclose="true" data-bgcolor="#f0f0f0" data-bordercolor="#999" data-textcolor="#333" style="">
        <h3>click me</h3>
        (with overlay - custom color - close button)
    </div>

• Tag
• jQuery