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&lt;BR&gt;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.

It's not possible to put html in a tool tip, see here stackoverflow.com/questions/484137/… — Nick
– Nick, Commented Sep 12, 2012 at 10:52
oh..k.Thank you.I tried like this label.Text="add<BR>peek". I have added it to e.Cell.Controls.Add(label). How can i make visible onhover calendar date. Can you help me please. — Nag
– Nag, Commented Sep 12, 2012 at 11:03

Community · Accepted Answer · 2017-05-23 12:27:15Z

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.

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Sep 12, 2012 at 11:48

Nick

6,6485 gold badges48 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nag Over a year ago

where should i add <td class="js-tooltip">

Nick Over a year ago

The td should get rendered as class="js-tooltip-container". The td will be generated by your code behind. By setting the CssClass property on the cell with e.Cell.CssClass = "js-tooltip-container"; you will get a table cell with the class attribute applied to it.

Nag Over a year ago

hey..thank you. i got it. its working. Can i make it as a ballon?

Collectives™ on Stack Overflow

Render Html String in tooltip

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related