A killer feature for
Truly Responsive Slides Pro is the ability to add tooltips to slides.
This is made possible thanks to two additional plugins (the
content plugin Slide Tooltips when using articles as data source or the
K2 plugin Slide Tooltips when using K2 items as data).
Once the desired plugin enabled, new fields appear either in articles or K2 items:
- in articles: fields show in the Images and Links tab,
- in K2 items: fields show in the Extra Fields tab.
For each individual tooltip, set:
|top||The top coordinate of the tooltip target|
|left||The left coordinate of the tooltip target|
|article/item||The article/item used as content for the tooltip|
|The tooltip title, when not using an article or K2 item as tooltip. Inline HTML tags are allowed|
|The tooltip content, when not using an article or K2 item as tooltip. Inline HTML tags are allowed|
|placement||The position of the tooltip in comparison to its target.
Note In Bootstrap 4, the placement may change if the room for showing the tooltip is insufficient.
|trigger||The way the tooltip is triggered in the slide
The target coordinates are calculated from the original image width and height (BEFORE it is resized to fit the slider). In order to avoid confusion as much as possible, it is better to make sure that original images are already the size of the final slider.
For instance, if the image is of width 1024 pixels and height 768 pixels, the target top and left coordinates are calculated as follow:
The target will get the correct position, no matter how the slider is resized (the position is calculated in percentages of the image size internally)
The tooltips are not subject to caption restrictions (they can be placed anywhere on top of the image). However, when using the slider with the auto-hide carousel of thumbnails, if the tooltip target is placed under the carousel when it is in full view, it won't be clickable, even if the carousel is hidden (that lower part of the slideshow is reserved for user input, to show and hide the carousel of thumbnails).
The tooltip content
Tooltips are Bootstrap popovers, therefore they need Bootstrap to function.
If your template is not using Bootstrap, set the Bootstrap compatibility of the extension to Joomla. This will ensure that Bootstrap, packaged with the Joomla core, will be loaded on pages where the slideshow is used.
Each tooltip is an article or K2 item, therefore it is good practice to place them into a separate category so they do not interfere with the slides themselves.
New Starting with version 1.10 of the extension, tooltips can also be created directly in the slides, eliminating the need for creating additional articles or K2 items representing them.
When using articles or K2 items as tooltips, It is possible to hide the tooltip title by setting the ‘show title’ article/k2 item option to ‘hide’.
Titles are <h3> tags. They will take the styling of the template.
Bootstrap sets the popover width to 276 pixels maximum. Popover width is handled automatically depending on its content. But this does not always give the best output representation. Therefore, it is best to manually ‘break’ lines in the content with \n in order to force the best display possible.
Why \n and not just a <br /> tag? For best representation when tooltips show under the slideshow on smaller devices. The \n is stripped out then and does not 'break' the output.
Holisticly embrace extensible models \nafter world-class ideas.
When too long, titles are truncated by default. To handle long titles (or simply show more sofisticated titles than just plain text), best is to add the title to the content, hide the title (article or k2 item option) and break with \n.
<h3>Conveniently innovate B2B networks after \nsynergistic schemas</h3>
<p>This is the content of the tooltip.</p>
Tooltips will not show on viewports smaller than 640 pixels wide. Instead, they will appear under the slideshow, one slide at a time. The target icons are replaced with numbers for convenience to the user. It is possible to style the tooltips' container by using the
CSS class parameter in the mobile section of the
Slides tab. That container is used for both content and tooltips (see
The list of options ->
On a large device:
On a small device:
- It is possible to show larger tooltips (by overriding the max-width property of the popover), but it is better to refrain from it. It may cause erratic behaviors.
- There is no support for plugin triggers inside the tooltip.
- Although html can be included into the tooltip content, the Bootstrap popover component cannot handle highly complex content. Use with caution.