Question

I have a View in which I’m using a tooltip provided by this site:
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html
This works fine with Google Chrome and Firefox,but this doesn’t work in IE6 or IE7.
1. How do I make it work in IE-6/7?
2. Also, I want to have a link inside the tooltip. When I try to click inside the tooltip, it disappears.I don’t want this to happen. As a workaround, I have kept a Timeout for the tooltip .Besides that, is there any other way I can achieve this?

Here is the code:

<link href="../../Content/demo.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/json2.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script src="../../Scripts/ajax/demo.js" type="text/javascript"></script>
<script src="../../Scripts/ajax/jquery.bgiframe.min.js" type="text/javascript"></script>
<script src="../../Scripts/ajax/jquery.bt.min.js" type="text/javascript"></script>
<script src="../../Scripts/ajax/jquery.hoverIntent.minified.js" type="text/javascript"></script>
<script src="../../Scripts/ajax/jqurey.easing.1.3.js" type="text/javascript"></script>
@*<script src="../../Scripts/ajax/jquery-1.3.2.min.js" type="text/javascript"></script>*@
<script type="text/javascript">
    $(document).ready(function () {
        $(".row").mouseover(function () {
            var d = $(this).attr("id");
            var obj = { x: d };
            $.ajax({
                url: '/Home/Change',
                type: "POST",
                data: JSON.stringify(obj),
                datatype: "json",
                contentType: "application/json; charset=utf-8",
                success: function display(response, status, data) {
                    //alert(response.id);
                    $(".row").bt("<a href='#'>Click here</a> " + response.id, { closeWhenOthersOpen:true,positions: 'bottom', hoverIntentOpts: { timeout: 1500} });
                }
            });

        });
    });
</script>

Here is the table code:

<table>
@for (int i = 0; i < 5; i++)
{
    <tr id="@i" class="row">
    <td>abcd</td>
    <td>this is row number @i</td>
    </tr>
}
</table>

Thanks!

Answer 1

I got the answer to my 1st question. To make it work in IE6 and onward, I have to include the Google’s Explorer Canvas: excanvas.sourceforge.net