I want to add tooltips to a form on my site. I am using the jQuery tools library. The tooltips show the content of the title attribute of an html input. Is there a way to make the asp.net textbox render out the title attribute in the html input it creates?
Since title is a global attribute, according to the W3C HTML language specifications, I would have expected a title property in the System.Web.UI.WebControls.WebControl.
However, Microsoft appears to have chosen a more 'appropriate' name for this property: Tooltip.
If you specify this property:
var label = new Label();
label.ToolTip = "tooltip";
label.Text = "text";
Controls.Add(label);
it will render:
<span title="tooltip">text</span>
which is just what you wanted.
Seeing that Tooltip is a property of the base WebControl, I assume that it will render as a title attribute for all WebControl classes.
You would do something like TextBox1.Attributes.Add("title", "Some title value");
Textbox.Attributes.Add("title","My text");
The .Attributes.Add("Attribute Name", "Attribute Value") lets you add most attributes to most controls, but always use the native property if available.
By far the easiest way is:
<asp:TextBox runat="server" title="My Title" />
Which renders
<input type="text" title="My Title" />
This also works with style etc, etc.
Related
I need to get the default font-name of text from a label control. (i.e)
<asp:Label Text="Test" ID="lblq" runat="server"></asp:Label>
How to find the font-name (or) font-family of the Label 'lblq' ? and Is font-family depends on the browser?
I have loaded default fonts in a dropdownlist. when I click a button, I just need to set the label 'lblq' font-name into selected value of dropdownlist.
Try:-
string myVal = lblq.Font.Name;
this is not as relavent to your question but might give you a head start
// this will give you the list of all installed fonts
using System.Drawing.Text;
InstalledFontCollection fontList = new InstalledFontCollection();
foreach(FontFamily family in fontList.Families)
{
ListBox1.Items.Add(family.Name);
}
You can find original font name using following code:
string originalFontName=lblq.Font.OriginalFontName;
I am using the following:
<img src="../../Content/Images/lock_16.gif" />
#Html.ActionLink("Register",
"Register",
"Users",
null,
new { title = "Register your ID", rel = "nofollow"
})
What I would like is for the lock image to appear inside of the <a> </a> so it is clickable and not before it. I already use (and change color on hover) of a background image so its not possible for me to use the background-image property to display the image.
Can anyone think of a way that I can set the image so that it will show before the text and still be clickable. Hopefully I can find a way that still allows me to use the MVC Html.ActionLink.
Html helpers in ASP.NET MVC should be used when they simplify writing code, not always. Plain html would go way better in your case
<a href="#Url.Action("Register", "Users")" title="Register Your ID", rel="nofollow">
Register <img src="#Url.Content("~/Content/Images/lock_16.gif")" />
</a>
Note that link address is still generated dynamically, using UrlHelper.Action method. This way, you do not lose link dependency to your route configuration. Also, as Nicholas mentioned, image source should be generated via Url.Content helper.
You may use something like -
#Html.ActionLink("link Name", "Action Method", "Controller", new { style = "background-image:url('.././Images/imageName.png')" },null)
#Html.ActionLink("link Name", "Action Method", "Controller",
new { style = "background-image:url('.././Images/imageName.png')" },
null)
How can I set the alt tag of an image that has been set using HyperLink.ImageUrl? I read an article that states you should be able to do HyperLink.Attributes["text"] = "My Alt Text" but that doesn't seem to work.
I want to try and avoid creating a separate image control and adding it to that hyperlink just to set an Alt tag.
Thanks.
asp:Hyperlink already has a "Text" property. Just set it and that will serve as the alt property of the image if you have the ImageUrl set.
ETA: I haved edited my answer based on Andrew MacNeill's suggestion below to show some example code.
Example:
hyperLink.Text = "My Alt Text";
hyperLink.NaviateURL = "www.myurl.com";
hyperLink.ImageURL = "myimage.jpg";
Renders HTML as:
<a href="www.myurl.com">
<img src="myimage.jpg" title="My Alt text" alt="My Alt Text">
</img>
</a>
it could work with the Attributes as you have mentioned but you should set such attribute in the PreRender event of the page or of the HyperLink, if you set it before the PreRender you will most likely lose it.
From codebehind, you can use something like this:
HyperLink HyperLink1 = (HyperLink)e.Row.FindControl("HyperLink1");
HyperLink1.ImageUrl = "Images\\Success.png";
HyperLink1.ToolTip = "Completed";
The ToolTip property will map to the alternate text for the image.
what is the best and most simplest way to create tooltip text for textboxes
With JavaScript and probably with a framework like jQuery that fits very well with ASP.NET MVC. Using the framework means that someone's alread done the hard work and written a plugin for it!
qtip
tooltip
List of some tooltip plugins
There is of course the title attribute on text inputs that shows as a popup tip in some browsers.
I found this to be the simplest and easy to maintain approach:
Create description using data annotation for the property of your model
Example:
[Display(Name="MyTextBox", Description = "Title for your entry")]
public string MyTextBox{ get; set; }
Then in your view access the description above using:
#Html.TextBoxFor(model => model.MyTextBox, new { title = ModelMetadata.FromLambdaExpression(model => model.MyTextBox, ViewData ).Description })
Just use the title tag :
<input type="text" title="Hello I'm the tool-tip"/>
Mvc way :
#Html.TextBoxFor(t => t.NameOfCustomer, new{ title= "Hello I'm the tool-tip" })
It's not fully customizable as is, but it does not require extra javascript nor a framework.
Use the data annotations on your model to put the tooltip in the Description property of the DisplayAttribute.
Then write your own Html Helper function that puts the Description property into the title attribute of the TextBox input field. You can call the helper TextBoxWithTooltipFor
In your view definition you can then replace the call to #(Html.TextBoxFor(...)) with the call to #(Html.TextBoxWithTooltipFor(...))
Here is the code that is tested and works.
quick back story--
I am working on ASP.Net based template editor that lets authors create text templates using Javascript inserted placeholder tags that will be filled in with dynamic text when the templates are used to display the final results.
For example the author might create a template like
The word [%12#add] was generated dynamically.
The application would eventually replace the tag with a dynamic word down the road (though it's not specifically relevant to this post)
The word foo was generated dynamically.
Depending on the circumstances, the template may be created in a text input, textarea or a modified version of the Ajax Control Toolkit HTML Editor. There might be 40 or more of these editable elements on the page, so using lots of stripped down or modified HTML editors would probably bog the page down too much.
The problem is that the tags such as [%12#add] are displayed inline with the user text and the result is confusing and aesthetically gross. The goal is parse the contens of the source element and when a tags such as [%12#add] are encountered, display something prettier and less cryptic to the user such as a stylable element or image wherever tags such as [%12#add] occur. The application still needs the template text with the tags on postback.
So the user might see
The word tag placeholder was generated dynamically.
but the original template would still be the value of the text input box
The word [%12#add] was generated dynamically.
It seems HTML editors like the ACT version and FckEditor accomplish this by rendering their output in an IFrame, but rather than kill myself trying to roll a lighter specialized version myself, I thought I'd ask if anyone knows of an existing free component or approach that has already tackled this.
With good reason, I don't think S.O. allows HTML formatting, but the bold "tag placeholder" above would ideally be something like tag placeholder.
I think CKEditor might be your best bet. I recently wrote a plugin for it that kept placeholders in the editable content for chunks of content that the user couldn't edit directly. A question I asked may help, particularly the comments to the accepted answer: Update editor content immediately before save in CKEditor plug-in.
The recommendation to me was to look at how object tags (e.g. as used to embed Flash movies) are handled, and from that I was able to proceed fairly quickly. Be aware though that CKEditor is not well documented for plugin developers, so you may often have to resort to looking at the source code.
Final model solution in case someone in the same situation needs a boost.
aspx page:
<div>
<asp:TextBox runat="server" ID="txtTest" TextMode="MultiLine" CssClass="Over" />
<br />
Add CKEdit
<br />
Add Tag
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click" />
</div>
<script type= "text/javascript" >
<!--
function ckTest(el) {
var tinyTool = {
toolbar:
[
['Bold', 'Italic', 'UIColor'], ['Styles', 'Format', 'Font', 'FontSize']
]
};
//Note: config.htmlEncodeOutput = true; to work with ASP.NET, see postback for decoding input
var editor = CKEDITOR.replace(el);//, tinyTool);
editor.addCss('.aux1 { background-color: #FFE0C0; border: solid 1px #17659E; }');
}
function insertTag(id, tag, display) {
var e = CKEDITOR.instances[id];
if (e) {
//Storing in comments does not work. stripped out when using insertHtml. Workaround?
//e.insertHtml("<span class='aux1'>" + display + "<!--" + tag + "--></span>");
//Kludge: fake attribute
e.insertHtml("<span class='aux1' tag='" + tag +"'>" + display + "</span> ");
}
}
-->
</script>
-->
</script>
CodeBehind:
protected void btnSubmit_Click(object sender, EventArgs e)
{
//Note: CKEditor converts single to double quotes in insertHtml
Regex regHiddenTag = new Regex(#"<span\sclass=""\w+""\stag=""(\[%[0-9]{1,2}_[TR]\])"">\w+</span>");
//Note: config.htmlEncodeOutput = true;
string encoded = txtTest.Text
.Replace("<", "<").Replace(">", ">").Replace("&", "&");
//TODO: Use AntiXss Library that I have to thwart bad HTML
string extractedTag = regHiddenTag.Match(encoded).Groups[1].Value;
//store to DB
string template = regHiddenTag.Replace(
encoded,
extractedTag);
//repopulate
string finalText = template.Replace(extractedTag, "foo");
}