Popovers

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

Default

Use @Html.LLG().Popover() method to create a Popover. Use .For(...)(+3 overloads) method to bind any html element, html string or LLG component. 

@Html.LLG().Popover()
    .Title("Hello world")
    .Content("popover content")
    .For(Html.LLG().Button("Popover example"))
                                
@Html.LLG().Popover()
     .Content("popover content")
     .For(@<text> <a href="#">Witout title</a> </text>)

Popover for any html element

use .For(...)(+3 overloads) method to bind any html element.

for LLG button

 Popover Button

for LLG countup

$850

for LLG progress

for the h3 heading

Heading

for a checkbox

for a form control

for a link

 Popover link 
// For button 
@Html.LLG().Popover()
    .Title("Hello button")
    .Content("popover content")
    .For(Html.LLG().Button("Popover Button").Size(ButtonSize.Small))

// For countup 
@Html.LLG().Popover()
    .Title("Hello countup")
    .Content("popover content")
    .Direction(PopoverDirection.Left)
    .For(Html.LLG().Countup().FromTo(0, 850).Prefix("$"))

// For progress 
@Html.LLG().Popover()
    .Title("Hello progress")
    .Content("popover content")
    .For(Html.LLG().Progress().Value(100))

// For checkbox 
@Html.LLG().Popover()
    .Title("Hello checkbox")
    .Content("popover content")
    .Direction(PopoverDirection.Left)
    .For(@<text>
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" checked="">
              <label class="custom-control-label">Checked</label>
            </div>
          </text>)

// For form control 
@Html.LLG().Popover()
    .Title("Hello form control")
    .Content("popover content")
    .For(@<text>
            <div class="form-group m-0">
                <input class="form-control" type="text" placeholder="First name">
            </div>
          </text>)

// For link
@Html.LLG().Popover()
    .Title("Hello link")
    .Content("popover content")
    .For(@<text>
            <a href="#" class="m-link">Popover link</a>
          </text>)

Direction

use .Direction(PopoverDirection direction) method to set Popover direction

PopoverDirection.Top

 Top

PopoverDirection.Bottom

 Bottom

PopoverDirection.Left

 Left

PopoverDirection.Right

 Right 
@Html.LLG().Popover()
    .Title("Hello link")
    .Content("popover content")
    .Direction(PopoverDirection.Top)
    .For(@<text> <a href="#">Top</a> </text>)        
                                
@Html.LLG().Popover()
    .Title("Hello link")
    .Content("popover content")
    .Direction(PopoverDirection.Bottom)
    .For(@<text> <a href="#">Bottom</a> </text>)  

@Html.LLG().Popover()
    .Title("Hello link")
    .Content("popover content")
    .Direction(PopoverDirection.Left)
    .For(@<text> <a href="#">Left</a> </text>)   

@Html.LLG().Popover()
    .Title("Hello link")
    .Content("popover content")
    .Direction(PopoverDirection.Right)
    .For(@<text> <a href="#">Right</a> </text>)

Methods

Alerts are available for any length of text, as well as an optional dismiss button

Method Description

.Method(bool value)

 Comming soon.