Creating inline tooltip links in DotNetNuke content with Inline Link Master and jQuery
Feb
26
Written by:
Friday, February 26, 2010 3:30 PM
I’ve had a few requests over time to provide ‘tooltip’ type functionality with the Inline Link Master module. The Inline Link Master module is one of those modules that is restricted only by the imagination of the person using it. It’s a hard thing to explain to people, so I thought I’d kill two birds with one stone, and both explain the module workings and provide a concrete example of how you can use it to enhance you DotNetNuke pages.
In this example, I am going to show how you can use the module to create inline ‘tooltips’ on specific keywords within your DNN Content. And to show that the Inline Link Master module is powerful and flexible enough to handle any type of content, I’m going to use it with the DNN Blog module. The Inline Link Master module works with just about any content on DNN, regardless of the content module. It works with the Blog Module, Html module and just about any other third party module you want to use.
Here’s what the finished result will look like – a hover-based tooltip showing information about the hovered link:
What is used in this example
Tooltips with Cluetip
In order to provide a smooth, easy to use tooltip popup functionality with the minimum of hassle, I chose the ‘ClueTip’ jquery plugin. This is a lightweight jQuery plugin that gives you a choice of options on how to show pop-up information when hovering over a particular link.
Inline Replacements with Inline Link Master
The Inline Link Master module will be used to find a particular phrase on the site (in this case, the phrase is ‘Inline Link Master’), turn that text into a link, and connect up a tooltip to that link.
Step by Step Instructions to Implement Tooltips on your DNN site with clueTip and Inline Link Master
Step 1 : Download the components
You’ll need to download the two components.
Download Inline Link Master : http://www.ifinity.com.au/Products/Inline_Html_Links_For_DNN
Download ClueTip : http://plugins.jquery.com/project/cluetip/
In the case of the Inline Link Master, you’ll need to install it on your site. You can get a trial version by filling out a trial licence request.
In the case of the cluetip, to follow this example, create a directory called ‘cluetip’ in the root directory of your site. Copy in the following files from the download package:
- jquery.cluetip.css
- jquery.cluetip.min.js
- the entire images directory into an \images directory in your cluetip directory.
You don’t need the other bits and pieces from the zip file for Cluetip.
Step 2 : Create the tip html and cluetip code
To do this, go to the page where you would like the tooltips to work. Add a text/html module, and go to ‘edit content’. When the text editor comes up, switch to ‘source’ or ‘text’ view, so you’re looking at the raw html.
Copy in the following code (feel free to change the content to your own specific needs)
<link id="clueTipCss" rel="stylesheet" type="text/css"
href="/cluetip/jquery.cluetip.css" />
<script src="/cluetip/jquery.cluetip.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
$('a.tooltip').cluetip({local:true,
cluetipClass: 'jtip',
arrows: true,
sticky: true,
mouseOutClose: true,
closePosition: 'title',
closeText: 'Close'
});
</script>
<div style="display: none"><div id="ilmtip">
<div style="float: right; margin3px: ">
<img alt="" height="50" src="/dnn523/portals/0/inlinelinkmasterthumb.png" />
</div>
<p>This powerful module allows you to find and replace any text within your
DNN content, and replace with any other piece of Html.
Usually this is used to create inline links, to assist with SEO through ensuring
maximum internal linking, even if the people doing
the editing are unaware of how to create links well.</p>
You can <a href="http://www.ifinity.com.au/Products/Inline_Html_Links_For_DNN">
download a free trial</a> copy of the software and try it out today. It is
compatible with DNN 4.6+ and DNN 5.x</p></div></div>
Note that while you can change the html content in the example, stick with the id and class names of the html in this example, until you have it working. Then you can go back and modify things a bit more. The content in the #ilmtip div is what is shown in the tooltip. The image is in this content just to show you can use any Html content you like – it’s not just limited to simple text.
The options in the cluetip jquery call specify how the display of the tooltip will work. There are many, many options : this example is just a particular choice. I will cover these options later in this article.
This text/html module won’t actually show any content, so you can clear out the title and switch off the container. You can also put it at the end of your content. Because of the way that the jQuery document.ready() function works, it doesn’t matter if the code is below the relevant links in your page html. Note that if you wish to use this on different pages throughout your site, you can just copy the module across, or tick the ‘show on all pages’ option.
Step 3 : Ensure you have a jQuery library reference on the page.
If you’re using DNN 5, it’s just case of going into the Host Settings page and ticking the ‘jQuery’ option, and either choosing self-hosted or google-hosted for the jQuery library.
If you’re using DNN 4, you can either include the jQuery reference in the top of the block in the text/html module above, or you can include the reference in the page settings header. This topic is well covered elsewhere, so if you get stuck, a quick search will help you out.
Step 4 : Set up the Inline Link Replacement
Go to the Admin->Inline Links page in your site. You will see the Inline Link replacements list. If you have just installed the module, there will be nothing in the list. Click on ‘Add new Replacement’ to add a new Inline Link replacement into the list. This will take you to the ‘Edit Inline Links’ page.
Type in a name you will use to remember your replacement by. For my test, I chose ‘Inline Link Master Test’.
In the ‘Find’ box, enter the text you would like to find in your site. In my case, I have entered ‘inline link master’.
Leave the ‘regex’ box unchecked unless you have wish to use a regex expression in the ‘Find’ box. This test will use a simple text search.
In the ‘Replace’ box, enter the following code. This is what will be replaced into the page html when the ‘inline link master’ string is matched.
Inline Link Master
There’s a couple of things here to note. One is that we’re turning the ‘inline link master’ string into a link to the Inline Link Master product page. The next is that this anchor element will have a class of ‘tooltip’, and a ‘rel’ attribute of ‘#ilmtip’. The ‘rel’ attribute is used by clueTip to find the matching
that contains the tooltip html. In our case we put that on the page with the text/html module (which is why you shouldn’t change the id value of the containing
). What will happen at runtime is that the clueTip plugin will find the div id=ilmtip element, and then load that as a floating tooltip.
Finally, the text of the anchor element is exactly the same as what we are replacing – so the only difference you’ll see is the text turn into a link. There’s no requirement for this, you can change the matching/replacing text if you like.
Finally, choose either the ‘use on all pages/modules’, or choose ‘select page’ and tick the page you’d like the replacement to work on.
When you’re done, click ‘save’ and then click on ‘return to list’.
Once back on the ‘Inline Links’ page, you should see the new link added to the list. It will show the find text, the replacement text, and will substitute that html in for you in the list.
Ensure that the module is switched on by clickin the ‘Switch Module On’ button. If it already says ‘Switch Module Off’, then the module is running.
Step 5 : Check it out!
Now you can go to the page you set the replacement up for, and you should find that your text on the page has been replaced with a link, and upon hovering over that link, you’ll get a tooltip pop up. With the clueTip options I have shown, the tooltip will be sticky until either you mouse out of the toolTip, or you click the ‘close’ link.
Step 6 : Modify it for your purposes.
The first thing you should try is changing the clueTip options. This is done by editing the content in your text/html module setup for the purpose. I recommend viewing this page to see some examples of the combinations of options: http://plugins.learningjquery.com/cluetip/demo/
You can view the effects, the html and the jQuery options used to produce the effect. You can use an external html file to load up the content, or use the ‘local’ option as I have shown in this example. You can have it sticky, small, large, with title, without title – the options are endless.
Also, don’t forget that if you know even a little bit of regex, you can use the ‘regex’ option in the Inline Link Master screen. This can be used to capture different spellings of keywords – important if you have content editors who are a bit cavalier with spelling of key terms and words. For example, you could put in a match like this : receipt|reciept to match the word receipt if it has a tendency to get mispelled on your site as reciept. Just enter a simple regex expression, check the ‘Regex’ option, and save the changes.
In Summary
Using a tooltip for sites is something that is a powerful tool if you have need for strong internal linking, or perhaps want to offer advertisers something a bit more special.
This method has SEO benefits as well, because of two points:
1. You are able to add in more specific content to a page without modifying it’s readability for the casual user
2. You are increasing links in the content. Whether these links point to another site to increase the incoming links, or whether they are part of an internal site linking strategy, the links assist in indexing your site and associating relevant keywords with the associated pages.
Did you try it out ? Let me know via the comments and give any feedback.
Copyright ©2010 Bruce Chapman