Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • webui-popover plugin in jQuery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 312
    Comment on it

    It is a plugin with jQuery which can be used to show popover . It can work with bootstrap but it can be used without bootstrap. It requires jquery1.7+
    It supports browsers IE8+, Chrome, Safari, firefox, Opera.

    These are the features of this plugin:

    • It is lightweight and fast.
    • It supports more placements and auto calculate placement.
    • It has close button in popover.
    • It can open multiple popovers in same page.
    • It has different styles.
    • It supports url, iframe, async mode and backdrop.
    • It has different animations.

    Installation:
     

    npm install webui-popover

    Getting Started:
    Localfile-
     

    <link rel="stylesheet" href="jquery.webui-popover.css">
    ...
    <script src="jquery.js"></script>
    <script src="jquery.webui-popover.js"></script>

    or CDN-
     

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.webui-popover/1.2.1/jquery.webui-popover.min.css">
    ...
    <script src="https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.webui-popover/1.2.1/jquery.webui-popover.min.js"></script>

    Using the plugin:
    You can use the plugin in different ways:
     

    1. $('a').webuiPopover({title:'Title',content:'Content'});
    <a href="#" data-title="Title" data-content="Contents..." data-placement="right">show pop</a>
    
    2. $('a').webuiPopover();
    <a href="#" >shop pop</a>
    <div class="webui-popover-content">
        <p>popover content</p>
    </div>
    
    3. <a href="#" >shop pop</a>
    <div id="myContent">
        <p>popover content</p>
    </div>
    $('a').webuiPopover({url:'#myContent'});

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: