CODEWITHSUNDEEP
jqueryasp.net-mvc-3
InfoLearner
InfoLearner

Reputation: 15608

How do I show a MVC3 View in a tooltip of Html.ActionList?

I wanted to show a tooltip window that displays "Details" view inside the tooltip window for the link:

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

How do I achieve this?

Upvotes: 1

Views: 5010

Answers (3)

Omar Salem
Omar Salem

Reputation: 166

should be var param = $(this).attr("param"); in Lester's javascript snippet

Upvotes: 0

chris
chris

Reputation: 37480

Almost every HTML element can have a title attribute, and most browsers will display this attribute as a tool tip.

So you want to use one of the ActionLink overloads that allows the setting of attribute values, something like:

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

Upvotes: 1

Lester
Lester

Reputation: 4413

I've found a CSS approach for tooltips to be easy to implement. Here is an example. In your case, you would define the CSS to be:

.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;
}

If you also want to load your tooltips dynamically instead of all at once you would need to use some 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);
        });
    });

Finally, you can use it as follows:

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

Upvotes: 1

Related Questions