How to bind ASP TextBox's Text to its ToolTip?

Question

I would like to the ToolTip always be the same as the ASP TextBox's Text. Of course I can write

AnyTextBox.Text = "any text";
AnyTextBox.ToolTip = "any text";

but I do not want to duplicate hundreds of assignment statements. I also could write change event handlers for the Text property, but I do not want to write dozens of event handlers just for this (if there is a more elegant solution)

Is there? Something like this:

<asp:TextBox ID="AnyTextBox" runat="server" ToolTip="binding magic goes here, but how?">

Thx in advance

CodingIntrigue · Answer 1 · 2013-10-16T13:34:00.953

3

You could write your own custom control which inherits from TextBox? I used the Text property to set the tooltip, but you can do it the other way around if you want.

Control:

public class TooltipTextBox : TextBox {
    public new string Text {
        get { return base.Text; }
        set
        {
            base.Text = value;
            this.ToolTip = value;
        }
    }
}

Markup:

<my:TooltipTextBox ID="AnyTextBox" runat="server" Text="binding magic goes here">

edited Oct 16 '13 at 13:34

answered Oct 16 '13 at 12:28

CodingIntrigue

75,930
30
170
176

This hides the original TextBox's Text property, so no way to set the text. Should not use _text backing field instead use base.Text as backing. Anyway THX :-) – g.pickardou Oct 16 '13 at 13:24
@g.pickardou Heh, should have checked this! Excellent point, updated answer – CodingIntrigue Oct 16 '13 at 13:34

score 2 · Answer 2 · answered Oct 16 '13 at 12:35

2

As far as i know there is no such automatism. For what it's worth, maybe you can use PreRender:

protected void Page_PreRender(Object sender, EventArgs e)
{
    var allTextControlsWithTooltips = new List<WebControl>();
    var stack = new Stack<Control>(this.Controls.Cast<Control>());
    while (stack.Count > 0)
    {
        Control currentControl = stack.Pop();
        if (currentControl is WebControl && currentControl is ITextControl)
            allTextControlsWithTooltips.Add((WebControl)currentControl);
        foreach (Control control in currentControl.Controls)
            stack.Push(control);
    }
    foreach (var txt in allTextControlsWithTooltips)
        txt.ToolTip = ((ITextControl)txt).Text;
}

You could also use a UserControl which handles this event, then you just need to put it on all of the pages that should behave in this way. Or you could let all pages inherit from one base page.

answered Oct 16 '13 at 12:35

Tim Schmelter

450,073
74
686
939

This is really nice. Out of interest, what's the reason you chose to compare the Control against two types `WebControl` and `ITextControl` instead of simply TextBox? – CodingIntrigue Oct 16 '13 at 12:42
@RGraham: It might be desired for [all webcontrols with a `Text` property](http://stackoverflow.com/q/2609066/284240), so that's the way. Otherwise just check for `TextBoxes`. However, this works also if controls are nested in container controls like `GridViews`(tested). – Tim Schmelter Oct 16 '13 at 12:44
But ITextControl doesn't have a ToolTip property, so mightn't this fail if the control does not explicitly declare a ToolTip property? – CodingIntrigue Oct 16 '13 at 12:47
@RGraham: That's why i take out only the `WebControls` ;-) – Tim Schmelter Oct 16 '13 at 12:49
There it is :) Thanks! Curiosity satisfied, you *earned* my +1 – CodingIntrigue Oct 16 '13 at 12:50

score 2 · Answer 3 · answered Oct 16 '13 at 12:36

2

I think using a JavaScript event handler will be your easiest solution. You don't need to write hundreds of event handlers though. Just write one and then use that same event handler for all your text boxes!

<asp:TextBox ID="AnyTextBox" runat="server" onchange="setTooltip(this)" />

And then the script would be

function setTooltip(textbox) {
    textbox.title = textbox.value;
}

That's it! Set that onchange event for all your Textboxes who you want to have this tooltip behavior.

answered Oct 16 '13 at 12:36

pineconesundae

332
1
13

2

But the tooltip should be the text even if the user doesn't change anything. – Tim Schmelter Oct 16 '13 at 13:08
This is very true; thus, my answer is not acceptable in the case where the TextBoxes may be pre-populated with example text! Good observation. – pineconesundae Oct 16 '13 at 13:11

score 0 · Answer 4 · answered Oct 16 '13 at 12:31

You can do this in the TextChanged event of the textbox :

<asp:TextBox ID="AnyTextBox" runat="server" TextChanged="AnyTextBoxTextChanged">

protected void AnyTextBoxTextChanged(object sender, EventArgs e)
{
this.AnyTextBox.Tooltip = this.AnyTextBox.Text;
}

score 0 · Answer 5 · answered Oct 16 '13 at 12:37

That depends if you are looking for "live update" of tooltip = i.e. do you want to change the tooltip when the user changes the text on website? Then use "onchange" event of the input and JS function that would change its "title" attribute on each event call.

Or you want to ease of your server-side work and do not want to specify tooltip and text for each item, then go with custom control way (and I recommend RGraham code).

Or match both methods and use custom control that would also provide JS "refresh" code :-)

score 0 · Answer 6 · answered Oct 16 '13 at 12:44

0

Try using jquery

$(function () {

        var maybe = true;
        var text = $('.myTextBox').val();
        if (maybe) {
            $('.myTextBox').attr('title', text);
        }

    });

answered Oct 16 '13 at 12:44

Nikin Jasani

51
2

How to bind ASP TextBox's Text to its ToolTip?

6 Answers6