Hi iammann,
Refer below sample.
HTML
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery.ui.tooltip.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$(".gridViewToolTip").tooltip({
track: true,
delay: 0,
showURL: false,
fade: 100,
bodyHandler: function () {
return $($(this).next().html());
},
showURL: false
});
})
</script>
<style type="text/css">
.ui-tooltip
{
padding: 10px 20px;
border-radius: 50px;
font: bold 14px "Thoma" , Arial;
box-shadow: 0 0 7px black;
color: Black;
background-color: Pink;
}
</style>
<div>
<asp:Literal ID="literal1" runat="server" />
</div>
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
literal1.Text = PopulateTable();
}
}
private string PopulateTable()
{
string[] objArray = { "Mudassar Khan", "John Hammond", "Suzanne Mathews", "Robert Schidner" };
string tableContent = "";
for (var i = 0; i < objArray.Length; i++)
{
tableContent += "<table border='1'><tr>";
tableContent += "<td class='hoverOnFAQ'><a href='#' class='gridViewToolTip' data-toggle='tooltip'";
tableContent += "<span style='color: #ff0000;' title= '" + objArray[i] + "' />";
tableContent += objArray[i] + " </a><table class='hoverOnAns' style='display:none;'><tr><td>" + objArray[i] + "</td></tr></table></td>";
tableContent += "</tr></table>";
}
return tableContent;
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
literal1.Text = PopulateTable()
End If
End Sub
Private Function PopulateTable() As String
Dim objArray As String() = {"Mudassar Khan", "John Hammond", "Suzanne Mathews", "Robert Schidner"}
Dim tableContent As String = ""
For i = 0 To objArray.Length - 1
tableContent += "<table border='1'><tr>"
tableContent += "<td class='hoverOnFAQ'><a href='#' class='gridViewToolTip' data-toggle='tooltip'"
tableContent += "<span style='color: #ff0000;' title= '" & objArray(i) & "' />"
tableContent += objArray(i) & " </a><table class='hoverOnAns' style='display:none;'><tr><td>" & objArray(i) & "</td></tr></table></td>"
tableContent += "</tr></table>"
Next
Return tableContent
End Function
Screenshot