corrade-http-templates – Rev 57

Subversion Repositories:
Rev:
<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Tooltip - Custom Styling</title>
        <link rel="stylesheet" href="../../themes/base/tooltip.css">
        <link rel="stylesheet" href="../demos.css">
        <script src="../../external/requirejs/require.js"></script>
        <script src="../bootstrap.js">
                $( document ).tooltip({
                        position: {
                                my: "center bottom-20",
                                at: "center top",
                                using: function( position, feedback ) {
                                        $( this ).css( position );
                                        $( "<div>" )
                                                .addClass( "arrow" )
                                                .addClass( feedback.vertical )
                                                .addClass( feedback.horizontal )
                                                .appendTo( this );
                                }
                        }
                });
        </script>
        <style>
        .ui-tooltip, .arrow:after {
                background: black;
                border: 2px solid white;
        }
        .ui-tooltip {
                padding: 10px 20px;
                color: white;
                border-radius: 20px;
                font: bold 14px "Helvetica Neue", Sans-Serif;
                text-transform: uppercase;
                box-shadow: 0 0 7px black;
        }
        .arrow {
                width: 70px;
                height: 16px;
                overflow: hidden;
                position: absolute;
                left: 50%;
                margin-left: -35px;
                bottom: -16px;
        }
        .arrow.top {
                top: -16px;
                bottom: auto;
        }
        .arrow.left {
                left: 20%;
        }
        .arrow:after {
                content: "";
                position: absolute;
                left: 20px;
                top: -20px;
                width: 25px;
                height: 25px;
                box-shadow: 6px 5px 9px -9px black;
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
        }
        .arrow.top:after {
                bottom: -20px;
                top: auto;
        }
        </style>
</head>
<body>

<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label> <input id="age" title="We ask for your age only for statistical purposes."></p>
<p>Hover the field to see the tooltip.</p>

<div class="demo-description">
<p>Hover the links above or use the tab key to cycle the focus on each element.</p>
</div>
</body>
</html>