metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Hints - Metro 4 :: Popular HTML, CSS and JS library</title> <style> .showHint { animation-name: hintIn; animation-duration: 0.5s; } .hideHint { animation-name: hintOut; animation-duration: 0.5s; } @keyframes hintIn { 0% { transform: translate3d(0, -200px, 0) scale3d(0.1, 0.1, 0.1); opacity: 0; } 40% { opacity: 1; animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); } 60% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } 80% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03); } 100% { animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } @keyframes hintOut { 0% { animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale3d(1, 1, 1); } 60% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1.08, 1.08, 1.08); } 80% { opacity: 1; animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); } 100% { opacity: 0; animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: scale3d(0.3, 0.3, 0.3); } } </style> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Hints</a></li> <li class="toc-entry"><a href="#_hints_about">Create hint</a></li> <li class="toc-entry"><a href="#_hints_position">Hint position</a></li> <li class="toc-entry"><a href="#_hints_options">Options</a></li> <li class="toc-entry"><a href="#_hints_events">Events</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Hints</h1> <p class="text-leader"> Metro 4 has an advanced, easy customizable hints system. </p>  <h3 id="_hints_about">Create hint</h3> <p> The hints system is intended for informing the user about the appointment of a particular element. Example, with <code>hint</code> you can inform user about button appointment. To create hinted element add <code>data-role="hint"</code> attribute to element and set hint text with attribute <code>data-hint-text="..."</code>. </p> <div class="example text-center p-4"> <button class="button warning" data-role="hint" data-hint-text="This is a hinted button">Hover me</button> </div> <pre><code class="html"> <button class="button" data-role="hint" data-hint-text="This is a hinted button"> Hover me </button> </code></pre> <h3 id="_hints_position">Hint position</h3> <p> You can set four positions for hint. To set hint position add attribute <code>data-hint-position="..."</code> to element. By default position is <code>top</code>. </p> <div class="example d-flex flex-justify-between"> <button class="button primary" data-role="hint" data-hint-position="right" data-hint-text="This is a hinted button">Right</button> <button class="button secondary" data-role="hint" data-hint-position="top" data-hint-text="This is a hinted button">Top</button> <button class="button info" data-role="hint" data-hint-position="bottom" data-hint-text="This is a hinted button">Bottom</button> <button class="button success" data-role="hint" data-hint-position="left" data-hint-text="This is a hinted button">Left</button> </div> <pre><code class="html"> <button class="button" data-role="hint" data-hint-position="right" data-hint-text="This is a hinted button">Right</button> <button class="button" data-role="hint" data-hint-position="top" data-hint-text="This is a hinted button">Top</button> <button class="button" data-role="hint" data-hint-position="bottom" data-hint-text="This is a hinted button">Bottom</button> <button class="button" data-role="hint" data-hint-position="left" data-hint-text="This is a hinted button">Left</button> </code></pre>  <h3 id="_hints_options">Options</h3> <p> You can set hint options to specify behavior. </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Option</th> <th>Data-*</th> <th>Default</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td>hintHide</td> <td>data-hint-hide</td> <td>5000</td> <td>Milliseconds to auto hiding hint</td> </tr> <tr> <td>clsHint</td> <td>data-cls-hint</td> <td></td> <td>Additional class for hint</td> </tr> <tr> <td>hintText</td> <td>data-hint-text</td> <td></td> <td>Text for hint</td> </tr> <tr> <td>hintPosition</td> <td>data-hint-position</td> <td>top</td> <td>Hint position</td> </tr> <tr> <td>hintOffset</td> <td>data-hint-offset</td> <td>4</td> <td>Hint position offset from element</td> </tr> <tr> <td>onHintCreate</td> <td>data-on-hint-create</td> <td>Metro.noop</td> <td>Fired when hint created</td> </tr> <tr> <td>onHintShow</td> <td>data-on-hint-show</td> <td>Metro.noop</td> <td>Fired when hint showing</td> </tr> <tr> <td>onHintHide</td> <td>data-on-hint-hide</td> <td>Metro.noop</td> <td>Fired when hint hiding</td> </tr> </tbody> </table> <div class="example text-center p-4"> <button class="button alert" data-role="hint" data-hint-text="This is a hinted button" data-cls-hint="bg-cyan fg-white drop-shadow" >Hover me</button> </div> <pre><code class="html"> <button class="button alert" data-role="hint" data-hint-text="This is a hinted button" data-cls-hint="bg-cyan fg-white drop-shadow" >Hover me</button> </code></pre> <h3 id="_hints_events">Events</h3> <p> When the <code>hint</code> is running, it generates various <code>events</code> that you can use. How to define Metro 4 components events see <a href="events.html">Events rules</a>. </p> <ul> <li><strong>onHintCreate(hint, element)</strong> - fired when hint created</li> <li><strong>onHintShow(hint, element)</strong> - fired when hint showing</li> <li><strong>onHintHide(hint, element)</strong> - fired when hint hiding</li> </ul> <div class="example text-center p-4"> <button class="button info" data-role="hint" data-hint-text="This is a hinted button" data-cls-hint="drop-shadow" data-on-hint-show="hintRoutines.showHint" data-on-hint-hide="hintRoutines.hideHint" data-hint-hide="0" >Hover me</button> </div> <pre><code> <style> .showHint { animation-name: hintIn; animation-duration: 0.5s; } .hideHint { animation-name: hintOut; animation-duration: 0.5s; } @keyframes hintIn { 0% { transform: translate3d(0, -200px, 0) scale3d(0.1, 0.1, 0.1); opacity: 0; } 40% { opacity: 1; animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); } 60% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } 80% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03); } 100% { animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } @keyframes hintOut { 0% { animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale3d(1, 1, 1); } 60% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scale3d(1.08, 1.08, 1.08); } 80% { opacity: 1; animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); } 100% { opacity: 0; animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: scale3d(0.3, 0.3, 0.3); } } </style> <button class="button info" data-role="hint" data-hint-text="This is a hinted button" data-cls-hint="drop-shadow" data-on-hint-show="hintRoutines.showHint" data-on-hint-hide="hintRoutines.hideHint" data-hint-hide="0">Hover me</button> <script> var hintRoutines = { showHint: function(hint, element){ hint.addClass("showHint"); setTimeout(function(){ hint.removeClass("showHint"); }, 500) }, hideHint: function(hint, element){ hint.addClass("hideHint"); } } </script> </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script> <script> var hintRoutines = { showHint: function(hint, element){ hint.addClass("showHint"); setTimeout(function(){ hint.removeClass("showHint"); }, 500) }, hideHint: function(hint, element){ hint.addClass("hideHint"); } } </script>    </body> </html>