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>Popovers - Metro 4 :: Popular HTML, CSS and JS library</title> </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="#">Popovers</a></li> <li class="toc-entry"><a href="#_popover_about">About</a></li> <li class="toc-entry"><a href="#_popover_triggers">Triggers</a></li> <li class="toc-entry"><a href="#_popover_text">Popover text</a></li> <li class="toc-entry"><a href="#_popover_position">Position</a></li> <li class="toc-entry"><a href="#_popover_hiding">Hiding</a></li> <li class="toc-entry"><a href="#_popover_styling">Styling</a></li> <li class="toc-entry"><a href="#_popover_events">Events</a></li> <li class="toc-entry"><a href="#_popover_methods">Methods</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>Popovers</h1> <p class="text-leader"> Use popovers to create element tooltips. </p>  <h3 id="_popover_about">Abouts</h3> <p> Sometimes it is necessary to provide the user with some additional information about the element. For this you can use <code>popovers</code>. To create element popover, add role <code>popover</code> to element with attribute <code>data-role</code>. To set popover text, use attribute <code>data-popover-text="..."</code>. </p> <div class="example d-flex flex-justify-center"> <button class="button" data-role="popover" data-popover-text="This is popover!">Hover Me</button> </div> <pre><code class="html"> <button class="button" data-role="popover" data-popover-text="This is popover!"> Hover Me </button> </code></pre> <h3 id="_popover_triggers">Triggers</h3> <p> To show popovers you can use any triggers: <code>hover</code> (default), <code>click</code> and <code>focus</code>. </p> <div class="example"> <div class="row"> <div class="cell-md-4"> Ubi est festus coordinatae? Zion is not <span class="text-bold" data-role="popover" data-popover-text="This is popover!">HOVER ME</span> the simple truth of the wind. </div> <div class="cell-md-4 d-flex flex-justify-center flex-align-center"> <button class="button" data-role="popover" data-popover-text="This is popover!" data-popover-trigger="click">Click Me</button> </div> <div class="cell-md-4 d-flex flex-justify-center flex-align-center"> <input type="text" data-role="popover" data-popover-text="This is popover!" data-popover-trigger="focus" placeholder="Put cursor here"> </div> </div> </div> <pre><code class="html"> <span class="text-bold" data-role="popover" data-popover-text="This is popover!">HOVER ME</span> <button class="button" data-role="popover" data-popover-text="This is popover!" data-popover-trigger="click">Click Me</button> <input type="text" data-role="popover" data-popover-text="This is popover!" data-popover-trigger="focus" placeholder="Put cursor here"> </code></pre> <h3 id="_popover_text">Popover text</h3> <p> To set popover text use attributes <code>data-popover-text</code>. Value fo this attribute can be simple text or valid html text. You can change this attribute at runtime. </p> <div class="example d-flex flex-justify-center"> <button class="button" data-role="popover" data-popover-hide="0" data-popover-text="<iframe width='560' height='315' src='https://www.youtube.com/embed/ssutK1Gei4A?rel=0&controls=0&showinfo=0&autoplay=1' frameborder='0' allowfullscreen></iframe>">Hover Me</button> </div> <pre><code class="html"> <button class="button" data-role="popover" data-popover-hide="0" data-popover-text=" <iframe width='560' height='315' src='https://www.youtube.com/embed/ssutK1Gei4A?autoplay=1' frameborder='0' allowfullscreen> </iframe> "> Hover Me </button> </code></pre> <h3 id="_popover_position">Popover position</h3> <p> You can use four positions for popovers: <code>top</code>, <code>bottom</code>, <code>left</code> and <code>right</code>. To set position use attribute <code>data-popover-position</code>. </p> <div class="example d-flex flex-justify-between"> <button class="button" data-role="popover" data-popover-text="This is popover!" data-popover-position="right">Right</button> <button class="button" data-role="popover" data-popover-text="This is popover!" data-popover-position="top">Top</button> <button class="button" data-role="popover" data-popover-text="This is popover!" data-popover-position="bottom">Bottom</button> <button class="button" data-role="popover" data-popover-text="This is popover!" data-popover-position="left">Left</button> </div> <pre><code class="html"> <button class="button" data-role="popover" data-popover-text="This is popover!" data-popover-position="top">Top</button> <button class="button" data-role="popover" data-popover-text="This is popover!" data-popover-position="right">Right</button> <button class="button" data-role="popover" data-popover-text="This is popover!" data-popover-position="left">Left</button> <button class="button" data-role="popover" data-popover-text="This is popover!" data-popover-position="bottom">Bottom</button> </code></pre>  <h3 id="_popover_hiding">Hiding</h3> <p> Attribute <code>data-popover-hide</code> is responsible for closing popovers. If a value for this attribute more then zero, popovers auto-hiding after milliseconds defined in this attribute. If this value is zero, popover can be closed when user click on popover. </p> <div class="example d-flex flex-justify-center"> <button class="button m-1" data-role="popover" data-popover-text="This popover closed after 5 secs!" data-popover-position="top" data-popover-hide="5000">Hover me</button> <button class="button m-1" data-role="popover" data-popover-text="Click Me to close!" data-popover-position="top" data-close-button="false" data-popover-hide="0">Hover me</button> <button class="button m-1" data-role="popover" data-popover-text="Click close button to close!" data-popover-position="top" data-popover-hide="0">Hover me</button> </div> <pre><code class="html"> <button class="button m-1" data-role="popover" data-popover-text="This popover closed after 5 secs!" data-popover-position="top" data-popover-hide="5000"> Hover me </button> <button class="button m-1" data-role="popover" data-popover-text="Click Me to close!" data-popover-position="top" data-popover-hide="0" data-close-button="false" > Hover me </button> <button class="button m-1" data-role="popover" data-popover-text="Click close button to close!" data-popover-position="top" data-popover-hide="0"> Hover me </button> </code></pre> <p> Also, you can use attribute <code>data-hide-on-leave</code> to set <code>event leave</code> from an element (mouse leave or touch end). When you set value for this attribute to <code>true</code> (default) then popover hiding when mouse leave or touch end. If you set value for this attribute to <code>false</code>, popover no hiding when mouse leave or touch end. </p> <h3 id="_popover_styling">Styling</h3> <p> You can set your own style for popovers with attribute <code>data-cls-popover</code>. Value for this attribute mus be valid css classes. </p> <div class="example d-flex flex-justify-center"> <button class="button m-1" data-role="popover" data-popover-text=" <div class='text-center'> <img src='images/logo.png' style='height: 64px;'> </div> This popover styled with custom classes! " data-cls-popover="bg-dark fg-orange drop-shadow" data-popover-hide="5000">Hover me</button> </div> <pre><code class="html"> <button class="button m-1" data-role="popover" data-popover-text=" <div class='text-center'> <img src='images/logo.png' style='height: 64px;'> </div> This popover styled with custom classes! " data-cls-popover="bg-dark fg-orange drop-shadow" data-popover-hide="5000"> Hover me </button> </code></pre> <h3 id="_popover_events">Events</h3> <p> When popovers works, it generated the numbers of events. You can use callback for this event to behavior with popovers or others. </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Event</th> <th>Data-*</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td>onPopoverShow(popover, element)</td> <td><code>data-on-popover-show</code></td> <td>Fired when popover showed</td> </tr> <tr> <td>onPopoverHide(popover, element)</td> <td><code>data-on-popover-hide</code></td> <td>Fired when popover hided</td> </tr> </tbody> </table> <h3 id="_popover_methods">Methods</h3> <p> You can interact with popovers with popovers methods. Use <code>show()</code> and <code>hide()</code> methods to show/hide popovers. </p> <div class="example"> <div class="row"> <div class="cell-md-6"> <button class="button" onclick="$('#input_popover').data('popover').show()">Show popover</button> <button class="button" onclick="$('#input_popover').data('popover').hide()">Hide popover</button> </div> <div class="cell-md-6"> <input type="text" data-role="popover" data-popover-text="This is popover!" data-popover-trigger="focus" data-popover-hide="0" id="input_popover" title=""> </div> </div> </div> <pre><code class="html"> <button class="button" onclick="$('#input_popover').data('popover').show()"> Show popover </button> <button class="button" onclick="$('#input_popover').data('popover').hide()"> Hide popover </button> <input type="text" data-role="popover" data-popover-text="This is popover!" data-popover-trigger="focus" data-popover-hide="0" id="input_popover"> </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>    </body> </html>