jQuery UI Helpers / Tooltip

Introduction

Use the Tooltip method to define a tooltip. This method generates a hidden input element which will contain the configuration attributes, and the init JavaScript will use this hidden element to create the tooltips. By default the tooltips are created for the whole document, but you can provide a jQuery selector to the Tooltip method to limit its scope to the items matching the selector.

@Html.JQueryUI().Tooltip(".tooltip-example-1")
<div class="tooltip-example-1">
    <div>
        @Html.Label("text1", "Text 1")
        @Html.TextBox("text1", null, new { title = "Enter text 1" })
    </div>
    <div>
        @Html.Label("text2", "Text 2")
        @Html.TextBox("text2", null, new { title = "Enter text 2" })
    </div>
</div>

The following textboxes display tooltips.

Like other widgets the tooltip also has a fluent configuration API.

@Html.JQueryUI().Tooltip(".tooltip-example-2").Track(true).Hide(Effect.Scale).Show(Effect.Scale)
<div class="tooltip-example-2">
    <div>
        @Html.Label("text3", "Text 3")
        @Html.TextBox("text3", null, new { title = "Enter text 3" })
    </div>
    <div>
        @Html.Label("text4", "Text 4")
        @Html.TextBox("text4", null, new { title = "Enter text 4" })
    </div>
</div>

The following textboxes display tooltips.

HTML Helpers

Fluent Configuration API