Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...How to make Tooltip for HTML content in DotNetNuke Module?How to make Tooltip for HTML content in DotNetNuke Module?
Previous
 
Next
New Post
4/11/2013 12:12 PM
 

Anyone know a good alternative to the tooltip? I need a function to show a tool tip on hyperlink, is DotNetNuke module support a tooltip which can contain html text?

 I am using C# to add a dynamic hyperlink which will show an html contain tooltip.

Example: Hyperlink1.ToolTip = "<font color="Red"><b>html contain</b></font>" ;

If DotNetNuke has a specific control which can show tool tip, please let me know. I just want to show a cool tool tip which is supported from DotNetNuke Module.

 Finally, my issue is how to make Tooltip for HTML content in DotNetNuke Module?

 
New Post
4/11/2013 6:21 PM
 

jquery is the best way to get fancy tool tips - here is a list of some great jquery tooltip addons.

http://www.1stwebdesigner.com/css/sty...

westa

 
New Post
4/11/2013 8:26 PM
Accepted Answer 

I already using jQuery for tooltip, but the DotNetNuke module its self has using jQuery for tooltip. Thus, when I add any jQuery tooltip, it will conflict with the jQuery from DotNetNuke and tear apart the interface.

In addition, I have seen the help label of DotNetNuke module, it very cool and easy to use, but why it only goes with help text but not other control?

That is why I am go here to ask for a way to use DotNetNuke's tooltip for other control like hyperlink, text box, image, etc...

 
New Post
4/11/2013 8:53 PM
 

Here is the problem of jQuery tooltip conflicting with DotNetNuke module. I have post my video clip on youtube, so all can see the problem more clearly.

http://www.youtube.com/watch?v=yjkkXP... 

And here is the jQuery of tooltip which I have use on DotNetNuke module:

 <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript">
    $(function() {
        $('[title]').tooltip({
            content: function() {
                var element = $(this);
                return element.attr('title')
            }
        });
    });
</script>

 
New Post
4/11/2013 11:19 PM
 
Tri Nguyen Dung wrote:

Anyone know a good alternative to the tooltip? I need a function to show a tool tip on hyperlink, is DotNetNuke module support a tooltip which can contain html text?

 I am using C# to add a dynamic hyperlink which will show an html contain tooltip.

Example: Hyperlink1.ToolTip = "html contain" ;

If DotNetNuke has a specific control which can show tool tip, please let me know. I just want to show a cool tool tip which is supported from DotNetNuke Module.

 Finally, my issue is how to make Tooltip for HTML content in DotNetNuke Module?

 

This is the ultimate answer for the question above.

Using C#, I create a dynamic help label from DotNetNuke module:

//Create an instance of Dnn Label
DotNetNuke.UI.UserControls.LabelControl myDnnLabel;
                    myDnnLabel = (DotNetNuke.UI.UserControls.LabelControl)LoadControl("~/controls/LabelControl.ascx");
//Set an html tooltip for the helptext attribute
                    myDnnLabel.HelpText = @toolTip;
//Create a css style whatever you want, eg: text-align: left; color: blue; etc....
                    myDnnLabel.CssClass = "dnnLabelStyle";

Now I will clear the help icon on Dnn Label:

//When I set a text for Dnn Label, I will add an html hyperlink tag to cover the text of Dnn Label, so that the help icon will disappear from Dnn Label and it just look like a normal text
myDnnLabel.Text = "<a href='#'>This is a normal text with Dnn Tooltip</a>";

Do two steps above we will have a text with Dnn Tooltip. Is that cool, isn't it!

If you want to add an url on the text with Dnn Tooltip, and see it just a normal hyperlin with a tool tip. Then just do the next step as follow:

//I add an attribute called onclick and it will open the url when user click on the text with Dnn Tooltip.
myDnnLabel.Text = "<a href='#' onclick=\"window.open('" + url + "', '_self');\">This is a normal text with Dnn Tooltip</a>";

Conclusion:  Ok, that is all the way to use Dnn Tooltip which contain html value on a normal text or hyperlink or some other control.

I hope my work can help other people around here who stuck on the same issue as mine.

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...How to make Tooltip for HTML content in DotNetNuke Module?How to make Tooltip for HTML content in DotNetNuke Module?


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.

Content Layout

Subscribe to DNN Digest

Subscribe to DNN Digest

DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.  


Copyright 2017 by DNN Corp Terms of Use Privacy
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out