Render Html String in tooltip

Question

I have a asp.net Calendar. On DayRender event of calendar I want to render html as tooltip.

e.Cell.ToolTip= HttpUtility.HtmlEncode("add<BR>peek") 

But its not working. How to render in browser as html.But it was rendering as

"asdsa<BR>peek"

Edit: I tried like this in another way.

Label b = new Label();
b.Visible = false;
b.Text = "add<BR>peek";
e.Cell.Controls.Add(b); 

Displaying fine. But I want to display label onhover the calendar date. How can I do this? Can any one help me. Thanks in Advance.

Answer 1

The easiest way to achieve this would be with jQuery. You need to make the containing cell and the label identifiable to unobtrusive javascript by using css classes. Then you can create a function for when the cell is hovered over which will find the label and display it, then hide when the mouse moves away:

Append the following lines to the server side logic you have already:

b.CssClass = "js-tooltip";
e.Cell.CssClass = "js-tooltip-container";

Your html should then look like (you don't have to code this part, its the result of your code behind):

<td class="js-tooltip-container">
    <label class="js-tooltip" style="display:none;">add <br /> peek</label>
</td>

Then you need to add the following jQuery:

<script type="text/javascript">
$(function(){
    $(".js-tooltip-container").hover(function(){
        $(this).find(".js-tooltip").show();
    }, function(){
        $(this).find(".js-tooltip").hide();
    });
});
</script>

The javascript makes use of the jQuery hover function. This is all boiler plate stuff so if you want something more robust and customisable I would consider using one of the plugins suggested here.