Automated Tooltip (FREE)

[Adendum]

I just added "Automated Tool Tip" to the extensions under the Miscellaneous section. Available from here.

This extension will prove useful for those pages (or entire web sites) where technical or complex words require a glossary or definition to assist the visitor in understanding the page or site content.

Working demo available here.

[protectourlands]

Where do you add the tooltip content?

[Adendum]

Everything is clearly laid out in the HELP file - click "Getting Started" in Extension Manager.

e.g.:-
Preparation & Use
1. You will need to create a list of terms and definitions. Using Notepad or similar text
processor; open the file terms_and_definitions.js and edit as required.

nPairs[nPairs.length] = "Term >" + "The definition to be applied to the term.";

Add your terms where you see red above and your definition where you see blue.

A 'Term' may be more than one word; e:g: “Recycling Plant”

[protectourlands]

So only 1 textbox on the page can have the extension applied?

[Adendum]

Correct - that's what the help file says:-

Known limitations
Only one text ID of subjectMatter is allowed per page.

[protectourlands]

I appreciate your work on this extension.

May I suggest you add some clarity to the step of adding the page content by referring to the text frame as a "text object" instead of a "text box" ? Also, I think it would help to specify that this is where the text content that applies the extension function is to be situated.

[Adendum]

UPDATE

25/08/11 : Previous naming update caused a problem with published files. Corrected.

25/08/11 : Removed the file terms_and_definitions.js from the published folder so that
your edited file is not overwritten on each publish. This therefore requires you to manually
copy the file from the ZIP file supplied into the TT folder. The terms_and_definitions.js file will also be found in the folder /WYSIWYG Web Builder/system/extensions/

Download from the extension manager or from http://extensions.wysiwygwebbuilder.com/

[Adendum]

Hi,

Not 100% sure I understand what you're looking for - maybe you can post a url of the page you've kludged so I (or someone) can get a better understanding.

However if you want to do what I think you do, I suspect I may have an answer.

Once you have placed your HTML Text Box content in the page you can access the HTML Properties of the text box by right clicking it and you will get the Object Properties dialogue window (you can do this for any object). This gives you access to BEFORE, INSIDE and AFTER tags and in the inside tag you could put id="subjectMatter".

Is that what you were looking for?

[Adendum]

Hmmm, I take that back! You can do that but when published the inside tag addition doesn't appear. In fact none of the tags hold on publish!!

Guess that's something Pablo will need to look at.

[Adendum]

lol, I'm having a conversation with myself....

May have the answer...

When you open the HTML Text Box extension there is an HTML button at the bottom of the window. Click that and enter <div id="subjectMatter"> before your content and a </div> at the end.

See if that works.

Code: Select all

<div id="subjectMatter">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></div>

[Navaldesign]

Yje HTML box extension actually is a HTML editor.
Editors don't add an ID because they actually are customized text editors, they don't keep an internal objects "register" and therefore they can't add an automated id attribute because they simply don't know which and how many objexts exist in the page code.

In this post viewtopic.php?f=42&t=41554 the solution has been suggested.

[Adendum]

In this post viewtopic.php?f=42&t=41554 the solution has been suggested.

Yeah, came to the same conclusion in the other thread...

[Adendum]

30/08/11 : Added option to have no underline for each term.
30/08/11 : Changed z-index to ensure the definition always appears on top.

[Adendum]

01/09/11 : Modified both the .js and .css files to overcome issues with styled text causing a
'ghost' definition to appear in text blocks.

While resolving an issue with rgsolutions it became evident that the previous version of this extension had issues with text styles that were give a CLASS attribute and this caused an empty definition panel to appear over any block of text that had class attributes set. I have therefore modified the original authors JavaScript file (previously unedited by me) so that it no longer looks for a CLASS statement and now has its own unique attribute of <ttt> and </ttt> rather than a <span> tag with a class attribute.

During discussions with rgsolutions, who I thank for his patience and testing of this revision, it also became apparent that using the extension with the HTML Text Box wasn't as simple as it should be. Therefore TWO methods of dealing with the HTML Text Box extension have been introduced to the updated HELP file.

[Adendum]

10/11/11 : Having only realised I could do this yesterday (doh!) I have modified this extension (and all my extensions - see list below) so that the live rendering of the extension in design view is greatly improved. In many cases the design view will take on a background colour you set in the extension properties.

Updates available from the WWB extensions site and my own demo site. Remember to check out the extensions listed below.

Anything Slider
Directory Listing
Elastic Thumbnail Menu
Image Information Panels
Image Swap Menu
Kick-Butt-Mega-Menu
Orbit Slider
Photo Info
Simple Horizontal Accordion
Slide Down Box Menu
Stacked Images
tab Slide Out