Hi,
I'm trying to change tooltip content text font and color. I use the online StyleBuilder to produce a custom skin file, set the skin file directory,register it in the script and setting both "EnableEmbededSkin" and "EnableEmbededBaseStyle" to FALSE follow the skinning chapter in the tutorial. After setting the SKIN property to the custom skin name, nothing happens. I even tried changing the SKIN property to some unknown name like 'abcfff' the same tooltip style got displayed as if some thing was preset. Are there other properties must be set in order to apply custom skin for RadToolTipManager?
Also, I felt that the RadTooltipManager is not like the RadToolTip. I made a simple trial; using the embeded skin. I tried few different skin and there seemed no difference in tooltip appearance. And when I set the ManualClose property the tooltip appeared with no close button.
please refer to the attached test file.
Thank you!
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="iBOOKSTORE.WebForm1" %><%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:TextBox ID="TextBox1" runat="server" Height="108px" Width="353px" TextMode="MultiLine" ToolTip="Show this in tooltip content"> Move mouse over this control to show tooltip </asp:TextBox> <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" Skin="Black" ManualClose="True"> </telerik:RadToolTipManager> </form></body></html>5 Answers, 1 is accepted
0
Hello,
If even setting a non-existing skin name does not result in a server error then it seems that you have this property set on a more global level - in the web.config, in the code-behind or in a Theme. Please make sure this not the case in your project. You can examine the following help article for some hints on the different ways to do so: http://www.telerik.com/help/aspnet-ajax/introduction-skin-registration.html.
If you disable the embedded skins and the embedded basestylesheet, yet you register the base stylesheet manually you would get a basics defined there, but hardly any colors/borders/etc. I'd advise that you follow the steps from the following help article to create your custom skin exactly: http://www.telerik.com/help/aspnet-ajax/tooltip-appearance-creating-custom-skin.html. Once you are able to get this custom skin running you should be able to easily replace the skin-specific file with the one you get from the VSB (create them with the same name, of course).
The easiest way to determine if the issue stems from a setting in the current project is to create a new one and only place your custom skin there with a simple test page. If it works correctly there you would need to examine your project for a setting like this.
As for the close button - the ManualClose property is obsolete. You should use the HideEvent property and set it to ManualClose. On the matter of the RadToolTip being different from the RadToolTipManager - indeed there is a difference as the manager offers richer functionality in many areas, yet is more complex to use, as its purpose is to cover complex scenarios. On the difference between the two you can examine this online demo.
Kind regards,
Marin
the Telerik team
If even setting a non-existing skin name does not result in a server error then it seems that you have this property set on a more global level - in the web.config, in the code-behind or in a Theme. Please make sure this not the case in your project. You can examine the following help article for some hints on the different ways to do so: http://www.telerik.com/help/aspnet-ajax/introduction-skin-registration.html.
If you disable the embedded skins and the embedded basestylesheet, yet you register the base stylesheet manually you would get a basics defined there, but hardly any colors/borders/etc. I'd advise that you follow the steps from the following help article to create your custom skin exactly: http://www.telerik.com/help/aspnet-ajax/tooltip-appearance-creating-custom-skin.html. Once you are able to get this custom skin running you should be able to easily replace the skin-specific file with the one you get from the VSB (create them with the same name, of course).
The easiest way to determine if the issue stems from a setting in the current project is to create a new one and only place your custom skin there with a simple test page. If it works correctly there you would need to examine your project for a setting like this.
As for the close button - the ManualClose property is obsolete. You should use the HideEvent property and set it to ManualClose. On the matter of the RadToolTip being different from the RadToolTipManager - indeed there is a difference as the manager offers richer functionality in many areas, yet is more complex to use, as its purpose is to cover complex scenarios. On the difference between the two you can examine this online demo.
Kind regards,
Marin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
TIGER
Top achievements
Rank 1
Rank 1
answered on 30 Sep 2011, 03:40 PM
Hi, Marin;
Thank you for your reply. Following your advice, I started all ove again with a new project file By following the http://www.telerik.com/help/aspnet-ajax/tooltip-appearance-creating-custom-skin.html. tutorial I created the custom skin "MyCustomSkin" . The tutorial told to copy "windows.default.css" but do nothing, I guess it is just nothing and leave it out. I tried to run the new page, nothing different happened to the appearance of tooltip. There was simply no way to tell if the tooltip is using the new skin. I tried to set "EnableEmbededSkin" and change SKIN property to different embeded skins and get the same tooltip appearance. And when "EnableEmbededSkin="false" I tried to change "MyCustomSkin" to "abcSkin", nothing happened differently, no server error reported, just the same tooltip appear with same style. It seemed steady as a stone, I could do nothing to change anything. One thing for sure, the tooltip appeared with no close button event I set HideEvent="ManualClose". Another fact that seemed to prove nothing could be changed. I would appreciate it very much if you could run the attached page.
and clearify things.
Thank you for your attention!
<%@ Page Title="主页" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestSkin._Default" %><%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title></title> <link href="Skins/MyCustomSkin/ToolTip.MyCustomSkin.css" rel="stylesheet" type="text/css" /></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:TextBox ID="TextBox1" runat="server" Height="108px" Width="353px" TextMode="MultiLine" ToolTip="Show this in tooltip content"> Move mouse over this control to show tooltip </asp:TextBox> <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" Skin="MyCustomSkin" EnableEmbeddedSkins="false" HideEvent="ManualClose" > </telerik:RadToolTipManager> </form></body></html>
0
Hello,
There was a typo in the help article, instead of Window.Default.css it should read ToolTip.Default.css. This has been fixed and I have updated your Telerik points for helping us find this issue.
I also tested your page with a skin I based off the Hay skin (just a random choice). I also added the Autotooltipify property so that I get a tooltip on the textbox. Things seem to be working as expected on my end: http://screencast.com/t/hH831CE8Ab. I am also attaching my test page as a reference. Please note the relative path in the <link> tag as I am using a separate folder for the test. This is not relevant to the case, it just has to be correct. Please also make sure you follow all the instructions - i.e. changing the occurrences of <built-in skin name> with <your custom skin name>.
An important point of interest is that when simply copying a built-in skin like that you are not actually modifying the appearance yet, you are simply loading the same CSS file from an actual file and not from a webresource. This is also a possible reason for the lack of difference you experience, as you actually load the same Default skin. This skin externalization is just the first step in creating a custom skin. Now you have an actual file you can modify as you please and so you can change colors, modify the image sprites themselves, etc.
Regards,
Marin
the Telerik team
There was a typo in the help article, instead of Window.Default.css it should read ToolTip.Default.css. This has been fixed and I have updated your Telerik points for helping us find this issue.
I also tested your page with a skin I based off the Hay skin (just a random choice). I also added the Autotooltipify property so that I get a tooltip on the textbox. Things seem to be working as expected on my end: http://screencast.com/t/hH831CE8Ab. I am also attaching my test page as a reference. Please note the relative path in the <link> tag as I am using a separate folder for the test. This is not relevant to the case, it just has to be correct. Please also make sure you follow all the instructions - i.e. changing the occurrences of <built-in skin name> with <your custom skin name>.
An important point of interest is that when simply copying a built-in skin like that you are not actually modifying the appearance yet, you are simply loading the same CSS file from an actual file and not from a webresource. This is also a possible reason for the lack of difference you experience, as you actually load the same Default skin. This skin externalization is just the first step in creating a custom skin. Now you have an actual file you can modify as you please and so you can change colors, modify the image sprites themselves, etc.
Regards,
Marin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
TIGER
Top achievements
Rank 1
Rank 1
answered on 04 Oct 2011, 01:11 PM
Hi, Marin;
Thank you for your reply. I downloaded the sample page your sent to me. It did not work just as it is. I had to set TargetControlID="TextBox1" and EnableEmbededBaseStyleSheet=false and now it worked as expected. I wonder how it worked in your case. Hope you could shine some light on it.
I have another question and wish to get your help: I've been studying Skins for some time by using Firebug to look into CSS rendered to the browser. It could be so nice if I can get the proper CSS classname and redefine the style of that classname in the header section of the page. This could lead to instant modification of the embeded skin. But I failed my try. I guess this must refer to the Precedence of the embeded style and redefined style. In my case, my instant CSS defination in the header section could not override the original style. Could you give some advice on how this could be achieved.
Thank you.
Thank you for your reply. I downloaded the sample page your sent to me. It did not work just as it is. I had to set TargetControlID="TextBox1" and EnableEmbededBaseStyleSheet=false and now it worked as expected. I wonder how it worked in your case. Hope you could shine some light on it.
I have another question and wish to get your help: I've been studying Skins for some time by using Firebug to look into CSS rendered to the browser. It could be so nice if I can get the proper CSS classname and redefine the style of that classname in the header section of the page. This could lead to instant modification of the embeded skin. But I failed my try. I guess this must refer to the Precedence of the embeded style and redefined style. In my case, my instant CSS defination in the header section could not override the original style. Could you give some advice on how this could be achieved.
Thank you.
0
Hello,
In my project I do not disable the embedded base stylesheet and I do not include it from an external file on the page. Therefore the RadToolTip downloads it when needed via the WebResources, which is the default way. If in your project you have it setup differently this is a probable reason why you needed to change this property. What is important here is that the base stylesheet is the same for all skins, so in most cases you needn't modify it.
As for the target control - in the markup you had sent you had RadToolTipManager and the textarea has its title property set (i.e. it has a tooltip). What the autotooltipify property does is take this string and place it in the RadToolTip that is to be shown instead of the regular tooltip. The Manager automatically attaches itself to elements that have the title property. If in your case you had changed it to a regular RadToolTip this is why you would have needed to explicitly set its targetControlID property - the RadToolTip does not offer automatic tooltipifying.
As for changing styles - if you load the skin-specific style from a file it is usually loaded after the style tag embedded in the markup so if your own styles are not heavier they will be overwriten. What you need to do is either add a tag name to the rules you copy to make the selectors heavier, or use the !important attribute. Please note that this is considered general CSS knowledge and even deeper understanding of CSS is needed in order to successfully modify our existing skins.
In case you need to only change one (or a few) properties of the tooltip you needn't create a custom skin, you can just place a <style> tag in the head section to override our built-in CSS with your desired rules.
I hope this information above helps you better clear your goals and understand the control.
Greetings,
Marin
the Telerik team
In my project I do not disable the embedded base stylesheet and I do not include it from an external file on the page. Therefore the RadToolTip downloads it when needed via the WebResources, which is the default way. If in your project you have it setup differently this is a probable reason why you needed to change this property. What is important here is that the base stylesheet is the same for all skins, so in most cases you needn't modify it.
As for the target control - in the markup you had sent you had RadToolTipManager and the textarea has its title property set (i.e. it has a tooltip). What the autotooltipify property does is take this string and place it in the RadToolTip that is to be shown instead of the regular tooltip. The Manager automatically attaches itself to elements that have the title property. If in your case you had changed it to a regular RadToolTip this is why you would have needed to explicitly set its targetControlID property - the RadToolTip does not offer automatic tooltipifying.
As for changing styles - if you load the skin-specific style from a file it is usually loaded after the style tag embedded in the markup so if your own styles are not heavier they will be overwriten. What you need to do is either add a tag name to the rules you copy to make the selectors heavier, or use the !important attribute. Please note that this is considered general CSS knowledge and even deeper understanding of CSS is needed in order to successfully modify our existing skins.
In case you need to only change one (or a few) properties of the tooltip you needn't create a custom skin, you can just place a <style> tag in the head section to override our built-in CSS with your desired rules.
I hope this information above helps you better clear your goals and understand the control.
Greetings,
Marin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now