Tooltips

Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.

Default

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

@Html.LLG().Tooltip()
    .Text("Hello world")
    .For(Html.LLG().Button("Tooltip example"))

Tooltip for any html element

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

for LLG button

 Tooltip Button

for LLG countup

$850

for LLG progress

for the h3 heading

Heading

for a checkbox

for a form control

for a link

 Tooltip link 
// For button 
@Html.LLG().Tooltip()
    .Text("Hello button")
    .For(Html.LLG().Button("Tooltip Button").Size(ButtonSize.Small))

// For countup 
@Html.LLG().Tooltip()
    .Text("Hello countup")
    .Direction(TooltipDirection.Left)
    .For(Html.LLG().Countup().FromTo(0, 850).Prefix("$"))

// For progress 
@Html.LLG().Tooltip()
    .Text("Hello progress")
    .For(Html.LLG().Progress().Value(100))

// For checkbox 
@Html.LLG().Tooltip()
    .Text("Hello checkbox")
    .Direction(TooltipDirection.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().Tooltip()
    .Text("Hello form control")
    .For(@<text>
            <div class="form-group m-0">
                <input class="form-control" type="text" placeholder="First name">
            </div>
          </text>)

// For link
@Html.LLG().Tooltip()
    .Text("Hello link")
    .For(@<text>
            <a href="#" class="m-link">Tooltip link</a>
          </text>)

Direction

use .Direction(TooltipDirection direction) method to set tooltip direction

TooltipDirection.Top

 Top

TooltipDirection.Bottom

 Bottom

TooltipDirection.Left

 Left

TooltipDirection.Right

 Right 
@Html.LLG().Tooltip()
    .Text("Hello link")
    .Direction(TooltipDirection.Top)
    .For(@<text> <a href="#">Top</a> </text>)        
                                
@Html.LLG().Tooltip()
    .Text("Hello link")
    .Direction(TooltipDirection.Bottom)
    .For(@<text> <a href="#">Bottom</a> </text>)  

@Html.LLG().Tooltip()
    .Text("Hello link")
    .Direction(TooltipDirection.Left)
    .For(@<text> <a href="#">Left</a> </text>)   

@Html.LLG().Tooltip()
    .Text("Hello link")
    .Direction(TooltipDirection.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.