Popover

less than 1 minute read

References

TypeScript

import { Components } from "gd-sprest-bs";

// Create the popover
let el = document.querySelector("#popover");
let popover = Components.Popover({
    el: el,
    isDismissible: true,
    btnProps: {
        text: "Popover Demo"
    },
    options: {
        content: "This is the popover content.",
        title: "My Popover",
        trigger: "hover"
    }
});

React

import * as React from "react";
import { Popover } from "gd-sprest-bsx";

export class IDemo extends React.Component {
    // Render the component
    render() {
        return (
            <Popover
                isDismissible={true}
                btnProps=
                options=



<div id="main" role="main">
  <div class="sidebar sticky">
    <nav class="nav__list">
        
        <input id="ac-toc" name="accordion-toc" type="checkbox" />
        <label for="ac-toc">Toggle Menu</label>
        <ul class="nav__items">
            <li>
                <a href=".." class="nav__sub-title">Back</a>
            </li>

            <!-- Autogenerate from Category -->
            
        </ul>

        <!-- Autogenerate from Page -->
        <ul class="nav__items">
  <li><a href="#web-component" class="nav__sub-title">Web Component</a></li>
</ul>

    </nav>
</div>

  <article class="page" itemscope itemtype="https://schema.org/CreativeWork">
    <meta itemprop="headline" content="Popover">
    
    
    

    <div class="page__inner-wrap">
      
        <header>
          <h1 id="page-title" class="page__title" itemprop="headline">Popover
</h1>
          
            <p class="page__meta"><i class="far fa-clock" aria-hidden="true"></i> 




  less than 1 minute read

</p>
          
        </header>
      

      <section class="page__content" itemprop="text">
        
        <p><a href="https://getbootstrap.com/docs/4.4/components/popovers">Documentation</a></p>

<h3 id="web-component">Web Component</h3>

<script type="text/javascript" src="https://unpkg.com/gd-sprest-bs-wc/dist/gd-sprest-bs.js"></script>

<bs-popover is-dismissible="true">
    // Return the popover properties
    return {
        btnProps: {
            text: "Popover Demo"
        },
        options: {
            container: "body",
            content: "This is the popover content.",
            title: "My Popover",
            trigger: "hover"
        }
    };
</bs-popover>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://unpkg.com/gd-sprest-bs-wc/wc/dist/gd-sprest-bs.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;bs-popover</span> <span class="na">is-dismissible=</span><span class="s">"true"</span><span class="nt">&gt;</span>
    // Return the popover properties
    return {
        btnProps: {
            text: "Popover Demo"
        },
        options: {
            container: "body",
            content: "This is the popover content.",
            title: "My Popover",
            trigger: "hover"
        }
    };
<span class="nt">&lt;/bs-popover&gt;</span>
</code></pre></div></div>

        
      </section>

      <footer class="page__meta">
        
        


        
      </footer>

      <section class="page__share">
  

  <a href="https://twitter.com/intent/tweet?via=dungeonwithag&text=Popover%20https%3A%2F%2Fdattabase.com%2Fextras%2Fbs%2Fcomponents%2Fwebcomponents%2Fpopover%2F" class="btn btn--twitter" onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" title="Share on Twitter"><i class="fab fa-fw fa-twitter" aria-hidden="true"></i><span> Twitter</span></a>

  <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdattabase.com%2Fextras%2Fbs%2Fcomponents%2Fwebcomponents%2Fpopover%2F" class="btn btn--facebook" onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" title="Share on Facebook"><i class="fab fa-fw fa-facebook" aria-hidden="true"></i><span> Facebook</span></a>

  <a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fdattabase.com%2Fextras%2Fbs%2Fcomponents%2Fwebcomponents%2Fpopover%2F" class="btn btn--linkedin" onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" title="Share on LinkedIn"><i class="fab fa-fw fa-linkedin" aria-hidden="true"></i><span> LinkedIn</span></a>
</section>


      
    </div>

    
  </article>

  
  
</div>

            />
        );
    }
}

VueJS

<template>
    <Popover isDismissible="true" v-bind:btnProps="btnProps" v-bind:options="options" />
</template>

<script>
import { Popover } from "gd-sprest-bs-vue";
export default {
    components: { Popover },
    data() {
        return {
            btnProps: {
                text: "Popover Demo"
            },
            options: {
                content: "This is the popover content.",
                title: "My Popover",
                trigger: "hover"
            }
        };
    }
}
</script>

Code Playground