Available in the Full Version

Popover - ASP.NET MVC

This sample demonstrates initializing the popover control using the ASP.NET MVC helper wrapper.




This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

The control is initialized in the view using chaining syntax. The popover is activated when you hover over the input fields. Clicking on the button will make both custom-styled popovers appear.

Code View

Copy to Clipboard 
@using Infragistics.Web.Mvc

<!DOCTYPE html>

<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

</head>
<body>
     <style type="text/css">
        .ui-igpopover > .ui-widget-content {           
            padding: 5px;
            background-color: #f9e6e7;
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
            border-radius: 8px;
            border-left-color: none !important;
        }       
        .ui-igpopover-arrow-left {
            border-right-color: #f9e6e7;
        }
        .ui-igpopover-arrow-top {
            border-bottom-color: #f9e6e7;
        }
        .ui-igpopover-arrow-bottom {
            border-top-color: #f9e6e7;
        }
        .ui-igpopover-arrow-right {
            border-left-color: #f9e6e7;
        }
    </style>

    <div id="formPopover">
        @(Html.Infragistics()
            .TextEditor()
            .ID("userNameEditor")
            .TextMode(TextEditorTextMode.Text)
            .Height("30px")
            .PlaceHolder("Username")
            .HtmlAttributes(new Dictionary<string, object> { { "title", "Please enter your username or email address" } })
            .Render()
        )
        <br />
        <br />
        @(Html.Infragistics()
            .TextEditor()
            .ID("passwordEditor")
            .TextMode(TextEditorTextMode.Password)
            .Height("30px")
            .PlaceHolder("Password")
            .HtmlAttributes(new Dictionary<string, object> { { "title", "Please enter your password" } })
            .Render()
        )
        <br />
        <br />
    </div>
    <input type="button" id="btnSubmit" />
    @(Html.Infragistics().Popover()
        .ID("formPopover input[title]")
        .Direction(PopoverDirection.Right)
        .Position(PopoverPosition.Balanced)
        .HeaderTemplate(headerTemplate =>
            {
                headerTemplate.CloseButton(false);
            })    
        .ShowOn(ShowOn.MouseEnter)
        .Render())
    <script>
        $( function ()
        {
            $( "#btnSubmit" ).igButton( {
                labelText: "Sign in",
                click: function ()
                {
                	showFormPopover($('#formPopover input[title]'));
                }
            } );
            function showFormPopover( target )
            {
                target.igPopover( "show");
            }
        } );
    </script>
</body>
</html>