Tooltips

To create tooltips we use http://craigsworks.com/projects/qtip/. A tooltip has two parts: the header and the text. To create a tip you only need the text. There are several ways to add a tooltip to an HTML element.

Menu

Two properties for ActionToolbarItem are added: ToolTipHeader and ToolTip. You can define them manually or with a builder.

@(Html.Toolbar().Group().ToolbarButton(new ActionToolbarItem(Html.GenerateName())
{
Text = SR.T("Send"),
IconUrl = "#x24/run_doc.gif",
ToolTipHeader = SR.T("Send"),
ToolTip = SR.T("Document management"),
Items =
{
new ActionToolbarItem(Html.GenerateName())
{
Text = SR.T("Send for approval"),
ToolTip = SR.T("Send for approval. The executors must approve or reject the document") 
},
new ActionToolbarItem(Html.GenerateName())
{
Text = SR.T("Send for approval"),
ToolTip = SR.T("Send for acquaintance. The executors must confirm having read the document") 
}
} 
})
)

@(Html.Toolbar().Group().Buttons(b =>
{
b.ContentAction(ContentActionProvider.CreateDocument)
.ToolTipHeader(SR.T("Create new document"))
.ToolTip(SR.T("New document is created in the current folder"));
b.ContentAction(ContentActionProvider.CreateFolder)
.ToolTipHeader(SR.T("Create folder"))
.ToolTip(SR.T("New folder is created in the current folder"))
.IconUrl(Url.Image("#x24/folders.gif"))
.Text(SR.T("Folder"))
.Buttons(bi => bi.ContentAction(ContentActionProvider.CreateFolder));
}))

HTML attributes

Two attributes are used to create a tooltip: tooltipheader, the header; and tooltiptext, the tip itself. E.g.:

@Html.ImageButton("#x16/place_add.gif", "", Html.OpenPopup("AddNomenclaturePopup").ToString(), anchorHtmlAttributes: new { @class = "tree-item-button", tooltipheader = SR.T("Add registration office"), tooltiptext = SR.T("Create new registration office or select an existing one") })
@Html.ImageButton("#x16/nomen_add.gif", "", string.Format("OpenDepositoryGroupPopup(0, {0});", (object)item.Value), anchorHtmlAttributes: new { @class = "tree-item-button", tooltipheader = SR.T("Add a section to the records classification scheme"), tooltiptext = SR.T("Go to adding a section to the records classification scheme") })
@Html.ImageButton("#x16/delo_add.gif", "", string.Format("OpenDepositoryPopup(0, {0});", (object)item.Value), anchorHtmlAttributes: new { @class = "tree-item-button", tooltipheader = SR.T("Add a category to the records classification scheme"), tooltiptext = SR.T("Go to adding a category to the records classification scheme ") })
@Html.ImageButton("#x16/delo_add_link.gif", "", string.Format("OpenDepositoryLinkPopup(0, {0});", (object)item.Value), anchorHtmlAttributes: new { @class = "tree-item-button", tooltipheader = SR.T("Add a link to category"), tooltiptext = SR.T("Go to creating a link to the selected category") })
@if (item.TypeUid != InterfaceActivator.UID(typeof(IRegistrationPlaceItem))) {
@Html.ImageButton("#x16/edit.gif", "", string.Format("EditObject({0})", (object)item.Value), anchorHtmlAttributes: new { @class = "tree-item-button", tooltiptext = SR.T("Modify") })
@Html.ImageButton("#x16/delete.gif", "", string.Format("DeleteRepositoryGroup({0})", (object)item.Value), anchorHtmlAttributes: new { @class = "tree-item-button", tooltiptext = SR.T("Delete") })
}

Script

To use a script, the Html.Tooltip("selector") builder is created. A jquery-selector is used as the selector. The builder has two methods, Header("text") and Text("text"), they define the header and the text of the tooltip.

$(document).ready(function() {
@(Html.Tooltip("#elementid").Header(SR.T("Header")).Text(SR.T("Tooltip text")).Script())
});