0

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!

karan k
  • 947
  • 2
  • 21
  • 45

3 Answers3

0

add this in the first of your HTML page :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
MHF
  • 511
  • 8
  • 22
  • it didn't work..by the way, It's a .CSHTML document,if that makes any difference – karan k Feb 14 '12 at 10:30
  • The cshtml document will be compiled/parsed to HTML before the server sents it to the browser. All the HTML rules aplies to the CSHTML document. – ferhrosa Oct 13 '14 at 16:50
0

If the authors sample work for you (It doesn't for me on IE9) then I would start from commenting out all css and js except for jQuery and your tip plugin. See if it will work then. If not, maybe you didn't install it correctly. If it will work. start uncommenting other libraries and css to see when it stops working. You must have some kind of conflict. Do you see any errors or warnings in Firebug or Chrome Developer Tools ?

Paweł Staniec
  • 3,151
  • 3
  • 29
  • 41
  • 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: http://excanvas.sourceforge.net/ – karan k Feb 14 '12 at 14:03
0

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

karan k
  • 947
  • 2
  • 21
  • 45