EXT: Image tooltips¶

What does it do?¶

This extension gives content editors the possibility to add tooltips to content images.

By default it comes with an implementation for the jQuery TOOLS tooltips but since it basically only renders a container with the tooltip text after the image you could also use your own code or a different library.

It comes with some example configuration and example CSS styles.

Screenshots¶

This is how the extension might look in the Frontend. The tooltip styles you see here are delivered with the extension:

These are screenshots of the Backend form for editing tooltips:

Users manual ------------

To use the extension you need to install it in the extension manager.

Tooltip rendering¶

To enable the rendering of the tooltip containers you need to add the static templates of the extension to your template.

Depending on which version of css_styled_content you are using you need to use “Image tooltip rendering” for TYPO3 4.7+ or “Image tooltip rendering 4.5 & 4.6” for TYPO3 version 4.5 or 4.6.

If you want to use the example configuration & styles you can also add the “Image tooltip example integration” template:

Manual integration ^^^^^^^^^^^^^^^^^^

If you are not using the example configuration you need to fulfill these perquisites for the tooltips to work:

You need to add the jQuery and jQuery TOOLS libraries to your page

You need to add the JavaScript file in the extension folder to your page or copy the code from this file in a JavaScript file you are including:Resources/Public/JavaScript/TooltipInitialization.js

You need to add CSS styles for the tooltips to your page. You can use the styles provided in the extension folder as a basis: Resources/Public/Css/Example.css

Using the t3jquery extension¶

If you do not want to include all required JavaScript libraries manually you can use the t3jquery extension .

Hints!Do NOTinclude the example configuration but include the CSS styles to your page (or use your own):

page.includeCSS.tx-imagetooltips = EXT:imagetooltips/Resources/Public/Css/Example.css

You still need to include the “Image tooltip rendering” template though!

You also need to activate the required jQuery libraries in the t3jquery Backend Module:

Use the ”Process & Analyze t3jquery.txt in extensions“ tool. There you need to select the imagetooltipsextension, press “Check” and then press “Merge and Use”.

Finally you need to enable the usage of t3jquery with a constant:

plugin.imagetooltips.t3jquery.enable = 1

Of course you can also use the constant editor to do this:

Adding tooltips ^^^^^^^^^^^^^^^

You can create tooltips in the Backend by adding a new record. The most convenient way is to add the tooltip record in the page where you want it to be displayed.

Here is a short explanation of the fields that are available in the tooltip records:

tooltipsPid¶

appearance.positionX¶

appearance.positionY¶

appearance.offsetX¶

appearance.offsetY¶

appearance.opacity¶

t3jquery.enable¶

t3jquery.tooltipJsFile¶