Hi! I am trying to create a callout using jquery but somehow the code is not working.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" type="text/css" href="Scripts/Menu.css"/>
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript" src="Scripts/jquery.callout.js"></script>
<!--<script type="text/javascript" src="jquery.callout-min.js"></script>-->
<script type="text/javascript" src="Scripts/callout.js"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ul id="myMenu" class="contextMenu">
<li class="insert"><a href="#insert" class="link" id="Add">Add New</a></li>
<li class="edit"><a href="#edit" class="link" id="Edit">Edit</a></li>
<li class="delete"><a href="#delete" class="link" id="Delete">Delete</a></li>
</ul>
<div id="adddiv" class="div">This is to add</div>
<div id="editdiv" class="div">This is to edit</div>
<div id="deletediv" class="div">This is to delete</div>
</form>
</body>
</html>
The script file callout.js follows.
$(document).ready(function () {
$("#adddiv").callout({ show: false, msg: "What is this?" });
$("#editdiv").callout({ show: false, msg: "What is this?" });
$("#deletediv").callout({ show: false, msg: "What is this?" });
$("#Add").click(function () {
$("#adddiv").callout("show");
$("#editdiv").callout("hide");
$("#deletediv").callout("hide");
});
});
Please help!