Question

我想显示一个工具提示窗口，在工具提示窗口中显示链接的“详细信息”视图：

@Html.ActionLink("Details", "Details", new { id=item.Id })

我如何实现这一目标？

Answer 1

我发现工具提示的CSS方法易于实现。 Here就是一个例子。在您的情况下，您将CSS定义为：

.info {
    position:relative;
    z-index:24;
}

.info:hover {
    z-index:25;
}

.info span {
    display: none
}

.info:hover span {
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #000;
}

如果您还想动态加载工具提示而不是一次性加载工具提示，则需要使用一些jQuery：

<script type="text/javascript">
    $(document).ready(function() {
        $(".tooltip").bind("mouseenter", function () {
            $(this).unbind("mouseenter");
            var param = {id: "$(this).attr('itemid')"};
            $(this).load("/Details/Details", param);
        });
    });

最后，您可以按如下方式使用它：

<span class="info">
    @Html.ActionLink("Details", "Details", new { id=item.Id })
    <span class="tooltip" itemid=item.Id></span>
</span>

Answer 2

几乎每个HTML元素都可以有title attribute，大多数浏览器都会将此属性显示为工具提示。

所以你想使用允许设置属性值的ActionLink overloads之一，例如：

@Html.ActionLink("Details", "Details", new {id=item.Id}, new { title = "this is your tooltip" } )

Answer 3

应该是Lester的javascript代码段中的var param = $(this).attr("param");

如何在Html.ActionList的工具提示中显示MVC3视图？

3 个答案: