我正在尝试使用Infragistics jquery igTree控件。我的要求是：当用户将鼠标悬停在任何子节点上时，我需要显示该节点的图像和工具提示。图像显示但不显示工具提示。我试图模仿http://jsfiddle.net/haFMn/17/
中给出的代码但它对我不起作用。 div正在[在其原始位置]显示，但不在节点级别显示。任何人都可以帮助我。我粘贴TreeView.cshtml页面供您参考。 [如果要正确查看图像路径，则需要更改图像路径]
// * ** * ** * **** 启动代码 的 ** * ** * ** * ** * < / em> ** * ** * ** * ** *
@{
ViewBag.Title = "TreeView";
}
<h2>TreeView</h2>
<script type="text/javascript">
$(document).ready(function () {
var offsetX = 20,
offsetY = 20;
$(".desc_hover").live('mouseenter', function (evt) {
var par = $(this).parent();
// if text is Tokyo Traders add image after node
//if ($(this).text() == "Tokyo Traders")
// if there is alredy added image do not add image again
if (par.find(">img").length < 2) {
var html = "<img class='favsport' src='../../Content/images/Football.png' title='Folder' style='border:none;width=20px;height=20px' id='imgdiv'></img>";
par.append(html);
}
var o = {
left: evt.pageX,
top: evt.pageY
};
$("#test").show().offset(o);
});
$(".desc_hover").live('mouseleave', function (evt, ui) {
var par = $(this).parent();
par.find($('#imgdiv')).remove();
$("#test").hide(2000);
});
var url = 'http://services.odata.org/OData/OData.svc/Categories?$format=json&$callback=?';
//creates new JSONP data source for OData
var jsonp = new $.ig.JSONPDataSource({ dataSource: url, responseDataKey: "d" });
//Load on demand happens automatically using OData, the loadOnDemand option,
//and properly configured bindings ><img class='favsport' src='../../Content/images/folder.png' alt='football' style='display: none;'></img>
$("#tree1").igTree({
dataSource: jsonp,
dataSourceType: 'jsonp',
responseDataKey: 'd',
loadOnDemand: true,
bindings: {
textKey: 'Name',
valueKey: 'ID',
primaryKey: 'ID',
nodeContentTemplate: "<img class='favsport' src='../../Content/images/folder.png' title='Folder' style='border:none;width=20px;height=20px'></img><label>${Name}</label>",
childDataProperty: 'Products',
bindings: {
textKey: 'Name',
valueKey: 'ID',
primaryKey: 'ID',
nodeContentTemplate: "<img class='favsport' src='../../Content/images/folder.png' alt='football' style='border:none;width=20px;height=20px'></img><label>${Name}</label>",
childDataProperty: 'Supplier',
bindings: {
textKey: 'Name',
valueKey: 'ID',
nodeContentTemplate: "<span data-tag><img class='favsport' src='../../Content/images/file.png'alt='football' style='border:none;width=20px;height=20px'></img><label class='desc_hover'>${Name}</label></span>"
}
}
}
});
});
</script>
<div class="content clearfix">
<!-- side nav begins here -->
<div id = "test1" class="side-nav">
<div id="tree1">
<p>Anirban</p>
</div>
</div>
<!-- side nav ends here -->
<section class="main-box">
<hgroup>
<h1>
Infragistics TreeView Control</h1>
<h2>
Load on demand </h2>
<p>
The other grid will go here</p>
</hgroup>
<div class="sampleContainer">
<!--igTree target element-->
<div id="sampleContent">
</div>
</div>
</section>
<span id="test" style="display:none;">This is a test</span>
</div>
答案 0 :(得分：3)
您是否查看过在线帮助？工具提示和图像网址有选项。请查看包含目前所有可用选项的以下链接 - link
答案 1 :(得分：0)
将跨度附加到身体并使其位置绝对：
<body>
<!-- Your other markup -->
<span id="test" style="position: absolute; display: none;">This is a test</span>
</body>
这可以解决您的跨度没有重新定位的问题。