Module JT Popup Balloon Documentation

Important Warning: Before installing this extension on Joomla! 5.x, please go to Joomla! System -> Manage -> Plugins and check to make sure that the plugin Behaviour - Backward Compatibility is Enabled.

1. Install the module JT Popup Balloon via Joomla! Extensions -> Manage -> Install.

2. Go to Extensions -> Modules and open the module JT Popup Balloon then select Show Title to Hide and Published the module JT Popup Balloon on any available position of your template. We recommend you publish the module JT Popup Balloon on the position named Debug because it is located at the bottom of your web page.

There are some templates that do not enable Debug position, please try to publish the module JT Popup Balloon on any other positions. Such as Footer, Bottom, Top, Position-7, ...

3. Go to Menu Assignment tab and select All Pages to display the module JT Popup Balloon on all pages of your website.

4. Keep all default settings and click Save & Close.

5. Clear your Joomla! cache and your Browser cache.

6. Go to your site then refresh your browser. If you see two demo banners floating on your website, this module works well on your site. If not, please view Troubleshooting below.

If you have installed the module JT Popup Balloon Free, you don't need to remove it, just install the module JT Popup Balloon Pro and open it then click Save to apply the Pro features. Your module will be upgraded to Pro and your old settings will be kept.

Please backup your website before making any update or upgrade. The new version may have many changes.

1. Go to Content -> Media then upload your image to joomla! image folder.

2. Go to Extensions -> Modules then open the module JT Popup Balloon and go to Popup Settings tab.

3.Select Vertical Position and Horizontal Position to display your image on the left side.

4. Enter your Link URL for the image.

5. Change Width and Height to fit your image.

6. Click Save & Close.

Live Demo: JT Popup Balloon display image link

1. Go to Extensions -> Modules then looking for the ID number of your module.

2. Open the module JT Popup Balloon and go to Popup Settings tab.

3. Select Module ID in Display Type drop-down list.

4. Enter your module ID to Module ID field.

5. Change Width and Height to fit your module.

6. Click Save & Close.

Live Demo: JT Popup Balloon displays module by ID

1. Go to Extensions -> Modules then looking for the ID number of your module.

2. Open the module JT Popup Balloon and go to Popup Settings tab.

3. Select Module Position in Display Type drop-down list.

4. Remember the name of module position in Module Position field. By default, this name is joomtut_popup but you can change it to whatever you want.

5. Change Width and Height to fit your module.

6. Click Save & Close.

7. Open your module that you want to display in popup balloon then go to the Position field and enter joomtut_popup (type by your keyboard then press enter).

You can select a module position from the drop-down list of predefined positions or enter your own module position by typing in the name then press Enter

8. Click Save & Close your module.

Live Demo: JT Popup Balloon Pro - Display Module By Module Position

1. Go to Extensions -> Modules then open the module JT Popup Balloon and go to Popup Toolbar Settings tab.

2. Choose a background color for the toolbar in Toolbar Color.

3. Enter your text in Toolbar Text.

4. Choose a color for the text in Text Color.

5. Enter URL for the text in Link URL .

6. Click Save & Close the module JT Popup Balloon.

Live Demo: JT Popup Balloon displays image with toolbar

1. Go to Extensions -> Modules then open the module JT Popup Balloon and go to Popup Options tab.

2. Enter the screen width to Auto Hide Screen Width. If you enter 600, your images or modules will not display on all devices with a screen width equal or smaller than 600px.

3. Click Save & Close the module JT Popup Balloon.

Live Demo: JT Popup Balloon auto hide on Mobile or small screen devices

1. Go to Extensions -> Modules then open the module JT Popup Balloon and go to Popup Settings tab.

2. Enter Popup Width on desktop screen.

3. Apply CSS @media Rule in Custom Style for Popup Width on Mobile screen.

4. Click Save & Close the module JT Popup Balloon.

If you want to display your Popup Balloon in full width on all device, please change Popup width unit to % and Popup width to 100

Live Demo: JT Popup Balloon Pro - Display Popup Full Width and AutoHide

1. Go to Extensions -> Modules then open the module JT Popup Balloon and go to Popup Options tab.

2. Set Display First Time Only to Yes.

3. Click Save & Close the module JT Popup Balloon.

Live Demo: JT Popup Balloon Pro - Display Popup Only First Time

1. Go to Extensions -> Modules then open the module JT Popup Balloon and go to Popup Settings tab.

2. Enter your Template or Bootstrap CSS Class in Popup Class field.

3. Enter your CSS code in Custom Style.

4. Click Save & Close the module JT Popup Balloon.

Live Demo: JT Popup Balloon Pro - Apply CSS Class to your images or modules

You can copy or duplicate the module JT Popup Balloon then publish them with different settings on different pages.

Please note that only one module works on the same page.

1. Go to Extensions -> Modules and open the module JT Popup Balloon then check to make sure the Status is Published and All Pages has been selected in Menu Assignment

3. The position named debug is not Enable on your template. You can go to your template option to enable it. Other ways, please try to publish the module JT Popup Balloon on other position.

There are some templates that do not enable Debug position, please try to publish the module JT Popup Balloon on any other positions. Such as Footer, Bottom, Top, Position-7, ...

Read more about How to enable debug position

Go to Extensions -> Modules and open your module then check to make sure the Status is Published and All Pages has been selected in Menu Assignment

The problems caused by compatibility view in Internet Explorer. You can fix it in one of the following ways:

Install the Plugin JoomTut Meta Tags

JoomTut Meta Tags is a simple plugin for Joomla! This plugin will fix website display problems with compatibility view in Internet Explorer by adding X-UA-Compatible Meta Tag Description to your website. The X-UA-Compatible meta tag helps render Web pages in older IE browsers. It also allows you to add your custom tags to head section.

Download Plugin JoomTut Meta Tags

Add yourself by editing your template

1. Go to Extentions -> Templates -> templates -> Click on your template name

2. Click to open the file named index.php in left column.

• Find:

<head>

• Affter add:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

• Your code looks like this:

<head>
   ...
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <jdoc:include type="head" />
   ...
</head>

3. Click Save & Close

1. Go to Extentions -> Templates -> templates -> Click on your template name

2. Click to open the file named index.php in left column.

• Find

</body>

• Before add

<jdoc:include type="modules" name="jt_popup" />

• Your code looks like this

...
<jdoc:include type="modules" name="jt_popup" />
</body>
</html>

3. Publish the module JT Popup Balloon on the position named jt_popup

Note that the name of this position cannot match the name in the Position Name of the module JT Popup Balloon.