3rd Party Libraries

Using Bootstrap Tooltips

The template will automatically initialize Bootstrap tooltips when you add the i-tooltip CSS class name to an element.

For example, if you add i-tooltip to a link element, the tooltip will display the text that you add to the title attribute:

<a href="#" class="i-tooltip" title="Some tooltip text!">
  Hover over me
</a>

To modify the default placement of the tooltip, use the data-placement attribute with one of the 5 available values: auto, left, top, bottom, right, for example:

<a href="#" class="i-tooltip" title="Tooltip on right" data-placement="right">
  Hover over me
</a>

Using Bootstrap Popovers

The template will automatically initialize Bootstrap popovers when you add the CSS i-popover class name to an element.

For example, if you add a i-popover class name to a button element, the popover will display the title from the title attribute and content from the "data-content" attribute:

<button
  type="button"
  class="btn btn-default i-popover"
  title="Popover title"
  data-content="Content for the popover"
>
  Click to toggle popover
</button>

To specify the placement of the popover, use the data-placement attribute with one of the 5 available values: auto, left, top, bottom, right, for example:

<button
  type="button"
  class="btn btn-default i-popover"
  title="Popover title"
  data-content="Content for the popover"
  data-placement="top"
>
  Click to toggle popover
</button>

To automatically hide the popover when visitors click anywhere on the page, add the data-trigger="focus" attribute:

<button
  type="button"
  class="btn btn-default i-popover"
  title="Popover title"
  data-content="Content for the popover"
  data-placement="top"
  data-trigger="focus"
>
  Click to toggle popover
</button>

Using Bootstrap Tabs

To use bootstrap tabs you can use the following code:

<ul class="nav nav-tabs">
  <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
  <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
  <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="tab1">Content of Tab 1</div>
  <div class="tab-pane" id="tab2">Content of Tab 2</div>
  <div class="tab-pane" id="tab3">Content of Tab 3</div>
</div>

The tabs will look like this by default:

The same code can be used in the template files of extensions like JReviews.

Animations with Animate.css

In the template's General settings you can enable the animate.css library to be able to easily apply CSS3 animations to elements using class names.

Examples of all available animation class names can be found on this page:

• https://daneden.github.io/animate.css

To add a specific animation to a Joomla module, add the name of the animation (i.e. "fadeInLeft") to the "Module Class Suffix" parameter and an extra "animated" class name which starts the animation:

This module animation will start as soon as the page is loaded.

Delay animations until the element becomes visible

If you want to add animations to modules that are outside the viewport on first page load, you need to enable the wow.js library in the template's General settings. This library allows you to start the animation when the visitor scrolls down and the module appears.

To delay the animation until the module is scrolled into view, use the wow class name instead of animated:

Apply animations to Joomla extensions

Animations are not limited to modules, you can add them to the content of any Joomla extension if you customize its template files.

For example, to animate the listing title on the JReviews listing detail page, edit its theme file (listings/detail.thtml), find the h1 heading code that contains the title:

<h1 class="contentheading"></h1>

and add animation classes:

<h1 class="contentheading bounceInRight animated"></h1>

Changing animation parameters

The default animation duration is set to 0.5s. If you want to change the duration, you can override it via the custom.css file, for example:

.animated {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}

This will change the duration of all animations. If you want to change the duration of a specific animation, include its name in the CSS selector, for example:

.animated.fadeInLeft {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}

You can also adjust the delay:

.animated.fadeInLeft {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

or make the animation repeat infinitely:

.animated.pulse {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}