.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt =================== EXT: Image tooltips =================== :Author: Alexander Stehlik :Created: 2012-09-20T15:45:40 :Changed by: Alexander Stehlik :Changed: 2013-11-06T22:37:04 :Classification: imagetooltips :Keywords: forEditors, forAdmins, forBeginners, forIntermediates :Author: Alexander Stehlik :Email: alexander.stehlik.deleteme@gmail.com :Language: en .. _img-1-img-2-EXT-Image-tooltips: |img-1| |img-2| EXT: Image tooltips =================================== Extension Key: imagetooltips Language: en Version: 0.1.0 Keywords: forEditors, forAdmins, forBeginners, forIntermediates Copyright 2017, Alexander Stehlik, This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 \- a GNU/GPL CMS/Framework available from www.typo3.org .. _Table-of-Contents: Table of Contents ----------------- **`EXT: Image tooltips 1 <#__RefHeading__5708_1738894311>`_** **`Introduction 3 <#__RefHeading__5710_1738894311>`_** `What does it do? 3 <#__RefHeading__463_413120346>`_ `Screenshots 3 <#__RefHeading__465_413120346>`_ **`Users manual 4 <#__RefHeading__467_413120346>`_** `Tooltip rendering 4 <#__RefHeading__770_2024023273>`_ `Manual integration 4 <#__RefHeading__772_2024023273>`_ `Adding tooltips 4 <#__RefHeading__774_2024023273>`_ **`Configuration 6 <#__RefHeading__31515_818911409>`_** **`Known problems 7 <#__RefHeading__31525_818911409>`_** **`To-Do list 8 <#__RefHeading__477_413120346>`_** **`ChangeLog 9 <#__RefHeading__31623_818911409>`_** .. _Introduction: Introduction ------------ .. _What-does-it-do: 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: Screenshots ^^^^^^^^^^^ This is how the extension might look in the Frontend. The tooltip styles you see here are delivered with the extension: |img-3| These are screenshots of the Backend form for editing tooltips: |img-4| |img-5| Users manual ------------ To use the extension you need to install it in the extension manager. .. _Tooltip-rendering: 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: |img-6| 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: 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: |img-7| 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: |img-8| 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. |img-9| Here is a short explanation of the fields that are available in the tooltip records: .. ### BEGIN~OF~TABLE ### .. _Hide: Hide """" .. container:: table-row Field Hide Description With this checkbox you can disable a tooltip .. _Description: Description """"""""""" .. container:: table-row Field Description Description This is only used internally and let's you describe your tooltip to make it easier for you to recognize it later .. _Related-content-element: Related content element """"""""""""""""""""""" .. container:: table-row Field Related content element Description Here you choose the content element (text or text with images) for which you want your tooltip to be shown. .. _Image-position: Image position """""""""""""" .. container:: table-row Field Image position Description An image content element can have multiple images. In this field you specify for which image the tooltip will be displayed. The numbers are starting from zero for the first image, 1 for the second and so on. .. _Tooltip-text: Tooltip text """""""""""" .. container:: table-row Field Tooltip text Description The text that will be shown as tooltip for the specified image .. _Horizontal-position: Horizontal position """"""""""""""""""" .. container:: table-row Field Horizontal position Description Horizontal position of the Tooltip relative to the related content element. .. _Vertical-position: Vertical position """"""""""""""""" .. container:: table-row Field Vertical position Description Vertical position of the Tooltip relative to the related content element .. _Horizontal-offset: Horizontal offset """"""""""""""""" .. container:: table-row Field Horizontal offset Description Offset of Tooltips in horizontal direction in pixels, seen from the position chosen above (may be negative, default zero). .. _Vertical-offset: Vertical offset """"""""""""""" .. container:: table-row Field Vertical offset Description Offset of Tooltips in vertical direction in pixels, seen from the position chosen above (may be negative, default zero). .. _Opacity: Opacity """"""" .. container:: table-row Field Opacity Description Opacity of Tooltip in % (0 .. 100 allowed, default 100) .. ###### END~OF~TABLE ###### .. _Configuration: Configuration ------------- The Extension can be configured with various TypoScript constants within the plugin.imagetooltipsnamespace: .. ### BEGIN~OF~TABLE ### .. _tooltipsPid: tooltipsPid ^^^^^^^^^^^ .. container:: table-row Property tooltipsPid Data type int Description When you want to store your imagetooltips in a central folder and not in the page where the tooltip should be displayed you can set this contant to the UID of the page where the tooltips are stored. Default 0 .. _appearance-positionX: appearance.positionX ^^^^^^^^^^^^^^^^^^^^ .. container:: table-row Property appearance.positionX Data type string Description Default horizontal position of the tooltips relative to their related content element. Possible values are: left, centerand right.This default value can be overwritten for each individual tooltip in the tooltip properties. Default center .. _appearance-positionY: appearance.positionY ^^^^^^^^^^^^^^^^^^^^ .. container:: table-row Property appearance.positionY Data type Description Default vertical position of the tooltips relative to their related content element. Possible values are:top, centerand bottomThis default value can be overwritten for each individual tooltip in the tooltip properties. Default top .. _appearance-offsetX: appearance.offsetX ^^^^^^^^^^^^^^^^^^ .. container:: table-row Property appearance.offsetX Data type int Description Default horizontal offset of the tooltips. The value can be positive or negative. This default value can be overwritten for each individual tooltip in the tooltip properties. Default 0 .. _appearance-offsetY: appearance.offsetY ^^^^^^^^^^^^^^^^^^ .. container:: table-row Property appearance.offsetY Data type Description Default vertical offset of the tooltips. The value can be positive or negative. This default value can be overwritten for each individual tooltip in the tooltip properties. Default 0 .. _appearance-opacity: appearance.opacity ^^^^^^^^^^^^^^^^^^ .. container:: table-row Property appearance.opacity Data type Description Default opacity of the tooltips. The value must be between 0 and 100. This default value can be overwritten for each individual tooltip in the tooltip properties. Default 100 .. _t3jquery-enable: t3jquery.enable ^^^^^^^^^^^^^^^ .. container:: table-row Property t3jquery.enable Data type boolean Description If t3jquery is installed and you set this to 1 (TRUE) the required JavaScript libraries will be loaded using the t3jquery API. Default 0 .. _t3jquery-tooltipJsFile: t3jquery.tooltipJsFile ^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row Property t3jquery.tooltipJsFile Data type string Description The JavaScript file that should be included using t3jquery. If you want to use your own JavaScript file to initialize the tooltips simply put the path to your file in here. Default .. ###### END~OF~TABLE ###### .. _Known-problems: Known problems -------------- Please be aware that this is a very young and notheavily tested extension. The there might be problems not yet detected. Testing and reporting problems is highly appreciated. .. _To-Do-list: To-Do list ---------- You and find the roadmap in the `forge project of this extension `_ . .. _ChangeLog: ChangeLog --------- You and find the change log in the `forge project of this extension `_ . .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. :border: 0 .. :height: 44 .. :id: graphics5 .. :name: graphics5 .. :vspace: 57 .. :width: 161 .. |img-2| image:: img-2.png .. :align: left .. |img-3| image:: img-3.png .. :align: left .. :border: 0 .. :height: 272 .. :id: Grafik1 .. :name: Grafik1 .. :width: 499 .. |img-4| image:: img-4.png .. :align: left .. :border: 0 .. :height: 537 .. :id: Grafik2 .. :name: Grafik2 .. :width: 560 .. |img-5| image:: img-5.png .. :align: left .. :border: 0 .. :height: 324 .. :id: Grafik7 .. :name: Grafik7 .. :width: 425 .. |img-6| image:: img-6.png .. :align: left .. :border: 0 .. :height: 227 .. :id: Grafik3 .. :name: Grafik3 .. :width: 511 .. |img-7| image:: img-7.png .. :align: left .. :border: 0 .. :height: 320 .. :id: Grafik5 .. :name: Grafik5 .. :width: 631 .. |img-8| image:: img-8.png .. :align: left .. :border: 0 .. :height: 319 .. :id: Grafik6 .. :name: Grafik6 .. :width: 631 .. |img-9| image:: img-9.png .. :align: left .. :border: 0 .. :height: 67 .. :id: Grafik4 .. :name: Grafik4 .. :width: 180