Tooltip in MVC : The Official Microsoft ASP.NET Forums

Reply

Deepika Kara...

Member

6 Points

27 Posts

Tooltip in MVC

Nov 21, 2012 03:20 AM|LINK

Hi,

I have just started with ASP.NET MVC. The view in this application uses Razor Engine. I have a requirement to display the row details of a webgrid as tooltip when a row in the grid is clicked. Can some one help me out to do this?

Thanks !!!

Deepika Karanth

Reply

BrockAllen

All-Star

28072 Points

4996 Posts

MVP

Re: Tooltip in MVC

Nov 21, 2012 03:33 AM|LINK

If you set the title attribute most browsers natively show some sort of tooltip. Otherwise I'd suggest searching for "jQuery tooltip" and take your pick of the litter of addons.

Brock Allen | http://brockallen.com
DevelopMentor | http://www.develop.com
thinktecture | http://www.thinktecture.com/

Reply

Deepika Kara...

Member

6 Points

27 Posts

Re: Tooltip in MVC

Nov 21, 2012 03:47 AM|LINK

Thanks! I understand that I have to use JQuery. But I am new to jQuery as well. So lil bit confused as how to start.

Here is my piece of code. Let me know How I can proceed.

I have a view EventList.cshtml. In this, I used normal table instaed of webgrid as I did not know how to get the row selected in webgrid.

@{
    ViewBag.Title = "EventList";
}

<h2>EventList</h2>
<style>
    .background
    {
        background-color: Lime;
        font-weight: 700;
    }
</style>
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.qtip-1.0.0-rc3.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.qtip.debug-1.0.0-rc3.js")" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        //       $("#tbl1").click(function () { alert("Hello World!!"); })
        var tr = $('#tbl1').find('tr');
        tr.bind('click', function (e) {
            var SLNo = $(this).closest('tr').children('td:eq(0)').text();

            //var values = '';
            //var tds = $(this).addClass('background').find('td');
            //var values = tds.map(function () {
           // return this.innerHTML; }).get().join(',');
        //alert(values);
        //$.ajax('#tbl1').load("/Event/EventDetail/" + SLNo);
            
        });
        tr.bind('mouseleave', function (e) {
            $(this).removeClass('background');
        });
    });
</script>
<table>
    <tr>
        <td>
            <table id="tbl1">
                <tr>
                    <th>
                        SL#
                    </th>
                    <th>
                        Event Title
                    </th>
                    <th>
                        Event ID
                    </th>
                    <th>
                        Event Status
                    </th>
                    <th>
                        Event Start Date
                    </th>
                    <th>
                        Event End Date
                    </th>
                </tr>
                @foreach (var evt in ViewBag.Events)
                {
                    <tr>
                        <td>
                            @evt.ID
                        </td>
                        <td>
                            @evt.EvtTitle
                        </td>
                        <td>
                            @evt.EvtId
                        </td>
                        <td>
                            @evt.Status
                        </td>
                        <td>
                            @evt.Start_Date
                        </td>
                        <td>
                            @evt.End_Date
                        </td>
                    </tr>
                }
            </table>
        </td>
        <td>
            <div id="eventinfo" title="Event Info" style="background-color: Yellow; border-bottom-width: thin">
            </div>
        </td>
    </tr>
</table>

I have written a controller method also to get the data related to selected row. Please help me out how to proceed.

Am I going in a right direction? if not, please suggest how to acheive this.

Thanks !!!

Deepika Karanth

Reply

Deepika Kara...

Member

6 Points

27 Posts

Re: Tooltip in MVC

Nov 21, 2012 03:50 AM|LINK

Hi,

Can you please help me out with the jQuery code ? I am new to jQuery as well. I feel that qtip does suite my requirements well. But I did not understand how to use it.

Thanks !