Extension talk:Balloons

Documentation

This extension works quite nicely sometimes, but not always in accordance with the documentation, at least not on my wiki.

1. The style parameter controls the text in the browser panel, not in the balloon as the documentation suggests.
2. Some but not all CSS styles seem to work.
3. Wiki tags (some at least) will work if the title=MyElement + <div style="display:none"></div> system is used. This allows placing regular wiki image tags in the balloon, and even DPL lists.
4. The width parameter doesn't seem to work at all.

Perhaps I haven't understood the documentation, or there is something wrong with my installation. I've tested the balloon extension on Firefox and Google Chrome.

Thanks for this useful extension.

--C4duser 04:41, 3 September 2008 (UTC)

C4duser:

1. This is the intended behavior. I made the documentation more specific so this is clear
2. examples?
3. Good to know!
4. This was a bug -- it is fixed in version 0.3

Mckays 14:00, 23 September 2008 (UTC)

No balloons here

No balloons here

Input as per-instructions but nothing

--24.249.248.8 16:58, 21 October 2008 (UTC)

-- I'm sorry it did not work for you and I'd like to help but you need to provide some details like error messages, etc. Contact information would also be helpful.
Almost all failure reports turn out to be the result of typos and not following the documention, so code samples and implementation details are helpful in diagnosing the problem.
Mckays 23:34, 23 October 2008 (UTC)

tarball corrupted

package tar corrupted.

resolved Mckays 00:29, 16 January 2009 (UTC)

The package was not corrupt but somehow affected by passage through CVS. It is OK now, I think. A .zip archive is also available. You can download the package here:

WBalloons.tar.gz

WBalloons.zip

Balloons in Demo Show Error

Hi, in your demo an error shows up during the second iteration of mousing over the hyperlinked text and images. The error message displays line invalid argument on line 342 character 16. Has this been fixed?

Thanks.

This has been fixed Mckays 00:27, 16 January 2009 (UTC)

as side-effect mouse-selection problems

Ballons work nicely. However, I get problems when I want to select pieces of text. Selecting text by left-mouse-click, keeping button pressed and then moving mouse does not always work anymore. Sometime it does, sometimes it does'nt. This irrespective whether the wiki-page is edited or not. I am using IE7 and mediawiki-1.12.1. When I disable balloons in LocalSettings.php selection works fine again. --194.171.252.100 12:44, 11 March 2009 (UTC)

We have the same promblem.Wait for your resolution Thank you for any help -- Tryflcwiki 09:15, 23 March 2009 (UTC)

I made one change, which seems to work fine in my local installation. The change is in "balloon.js", line 603 " if (!self) return true;" (I replace "false" by "true"). Note that I am not the editor of this extension. I left a note in [1] as well. Let me know if it works for you as well. walfried.veldman@gmail.com --Walfried.veldman 11:14, 6 April 2009 (UTC)

great!it works well in mine. it's very useful for me.thank u! by the way, if this solution has other side-effects,please let me know. thanks. Tryflcwiki 00:53, 7 April 2009 (UTC)

Thanks to all. I fixed this a while back in the non-wiki version but only just added it here. Please advise (mckays@cshl.edu) if your IE text selection gives any problems. Mckays 11:58, 29 August 2009 (UTC)

I recently installed the balloon extension and I am also having this selection issue. I am using Mediawiki 1.15.1, PHP 5.3.0 (apache2handler), MySQL 5.1.37 and Balloons Version $Id: balloon.js,v 1.33 2008/08/22 13:07:04 sheldon_mckay Exp $. The issue occurs in Internet Explorer 7.0.5730.13C). This issue doesnt occur in Mozilla. I havent tried any of the modifications discussed here, because it says it should be fixed in the base download. I will check to see if I can fix the issue with the discussed modifications.--198.208.251.22 15:10, 5 August 2010 (UTC)

HTML within a balloon

• I tried out your balloons extension for MediaWiki and found it to be a very useful tool....

• There is a way to display HTML within the <balloon> tag that I had discovered basically because of
  the same problem sending information to Wiki templates and back again. This was a problem caused by the
  wiki conversions that occur.

• Utilizing the html character coding for "< &lt;, > &gt; etc."; as an example, was used to create a table within the <balloon> tag:
• Code on Wiki page looks like this:

<balloon title="&lt;table border=2&gt;
&lt;th colspan&#61;3 bgcolor&#61;lightblue&gt;THIS IS A TABLE&lt;/th&gt;
&lt;tr&gt;&lt;td&gt;ONE!&lt;/td&gt;&lt;td&gt;TWO!&lt;/td&gt;&lt;td&gt;THREE!&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;FOUR!&lt;/td&gt;&lt;td&gt;FIVE!&lt;/td&gt;&lt;td&gt;SIX!&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;" style="color:red;font-size:10pt">A TABLE!</balloon>

• This will be converted successfully for the balloon tag when page is rendered:

<balloon title="<table border=2>
<th colspan=3 bgcolor=lightblue>THIS IS A TABLE</th>
<tr><td>ONE!</td><td>TWO!</td><td>THREE!</td>
</tr>
<tr><td>FOUR!</td><td>FIVE!</td><td>SIX!</td>
</tr>
</table>" style="color:red;font-size:10pt">A TABLE!</balloon>

• Its a bit messy looking; however, this does work in IE7, FF, and Google Chrome....
• not all html is allowed in a Wiki though that can be easily changed if need be.

Wjk 21:46, 3 May 2009 (UTC)

Reply: Thanks for the feedback. You are quite correct that formatted HTML can be inserted as an attribute to the <balloon> element using HTML escape codes. However, it does not scale well and gets really nasty for complex content. I would recommend the load: syntax, which allows you to use regular HTML and be as fancy as you like, within the limits imposed by MediaWiki. Also see the documentation for balloon.js Mckays 11:51, 29 August 2009 (UTC)

here is a screenshot of wjk's table: http://gyazo.com/768b61d5782b7c4c1bb788acf16c3165.png

the gmod.org page is really difficult to understand. i see no one can edit it either.

"The API is fairly simple. Simply add a mouseover event handler to any HTML element you want to fire a tooltip."

Where does this mouseover event handler to any HTML element go? Is this information not for wikis? Can I use it for my wiki?

Why is it everytime I see the word "simple" and "easy" by programmers it never is?

the basic extension is so easy to use, which I am very grateful for, but anything beyond basic text balloons is extremely difficult to understand. Igottheconch 01:10, 30 September 2011 (UTC)

Version number

The version number is still "0.1" in your "0.3" code. The Special:Version will show 0.1 only.

Fixed. Thanks. Mckays 11:49, 29 August 2009 (UTC)

Still supported?

I have some fairly serious issues getting this to work, although I may be exceeding the scope of the extension. Is anyone still supporting this? If so I'll give a lot of details, if not I'll save the keystrokes :) -- 85.214.55.250 00:49, 31 July 2009 (UTC)

Yes. still supported. Email is the best method for feedback, I do not monitor this page in a regular basis. mckays@cshl.edu Mckays 11:48, 29 August 2009 (UTC)

Use on Mediawiki.org

How do I get this to work on a wiki hosted on mediawiki.org itself? 211.30.244.97 23:53, 12 March 2010 (UTC)

Compatibility with Semantic Forms

I use Semantic Forms and found that there is a compatibility issue. Basically, forms to edit the page are constructed without including the necessary Balloon extension javascript files. To resolve this issue, I added the following text to line 150 of \extensions\SemanticForms\includes\SF_Utils.inc as follows:

 $wgOut->addScript('<script type="text/javascript" src="' . $wgScriptPath . '/extensions/balloons/js/yahoo-dom-event.js"></script>' . "\n");
 $wgOut->addScript('<script type="text/javascript" src="' . $wgScriptPath . '/extensions/balloons/js/balloon.config.js"></script>' . "\n");
 $wgOut->addScript('<script type="text/javascript" src="' . $wgScriptPath . '/extensions/balloons/js/balloon.js"></script>' . "\n");
 $wgOut->addScript('<script type="text/javascript">' . "\n" .
 'var balloon = new Balloon;' . "\n" .
 'BalloonConfig(balloon);' . "\n" .
 'balloon.images   = "' . $wgScriptPath . '/extensions/balloons/images";' . "\n"  .
 '</script>' . "\n");

Kind of a nuclear approach, but it worked for me. Thanks for the great extension. Cheers, Thorncrag 01:01, 29 March 2010 (UTC)

Kudos to Thorncrag for this tip! Hade the same problem with semantic forms. Baloons is an great way to make concise semantic forms, because you can add lenghty form guidelines inside balloons.

Hi, is there a way to get Balloons working with Semantic Forms 2.0.4? This would be great because this extension provides a great benefit for it. By the way, did you really mean SF_Utils.inc since there is no such file. Instead SF_Utils.php is available there. Any help will be greatly appreciated even if it is a nuclear approach. :) Cheers --kgh 17:37, 19 November 2010 (UTC)

Indeed, the change is now actually to SF_Utils.php, I personally have put it on line 156. There is a feature for SF now though that does tooltips (can't tell you much more than that though, sorry).    Thorncrag   02:25, 22 November 2010 (UTC)

Hi Thorncrag, thank you for answering. I tried to get this approach running on my wiki, but failed for some reason or the other. 8( It is even more embarrassing for me, that I was not aware that Semantic Forms is now providing a tooltip feature itself which is working perfectly as described and covers existing needs. This really helped my out of my “misery”. :) It might still be interesting to use this extension in conjunction with Semantic Forms. To my experience one should know what she or he is doing. Last, not least: Balloons is awesome! Cheers --kgh 20:57, 22 November 2010 (UTC)

onclick event is not triggerd

I installed the balloons extension and it working partly.

I want to use the onclick mouse event but when i use this it will not be triggered. onmouseover works but onclick has no effect, error on page is displayed in statusline.

How can i use the onclick mouse event?

balloon.js, Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

The following error Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 Balloon.doShowTooltip (balloon.js 353) is shown in Firebug on a Mediawiki 1.16.1 system. The result is that no balloon does not show up. The balloon is used in connection with the display of semantic information:

{{#tag:balloon |{{{1|}}}| title= {{#show:{{{1|}}}|?Abstract}} }}

--MWJames 23:53, 6 February 2011 (UTC)

Create and use small box instead of big balloon

I was able to install and make work the Balloons extension with no problems. But I would like to have not a balloon, but a small box, the kind you see when you put your mouse over “Main page”: square, simple, right under the “hand”. I tried to modify the balloon, not good. I brought the box.js file and tried to use it, but I don’t really know how. Can anyone please help me? Ion Buicliu - February 22, 2011 10:36 PST

Perhaps manipulating CSS directly should help the cause. Firefox and Firebug are your best friends in this case. Cheers --[[kgh]] 16:05, 26 February 2011 (UTC)

how to add a pop up image

<html><span onmouseover="balloon.showTooltip(event,'<img src=\'imageSourse\' />')">Fig</span></html> source: [2] Igottheconch 17:59, 25 September 2011 (UTC)

here is an example that worked for me, with Extension:SecureHTML installed:

The base administrator protected page called Balloons has this coding:

<span onmouseover="balloon.showTooltip(event,'<img src=\'/w/images/0/05/Tunnel_Gas_Station.jpg\' />')">TEST</span>

where /w/images/0/05/Tunnel_Gas_Station.jpg is the location of your image.

Then on a different page Gas Station, I add: {{#shtml:Balloons}}

The balloon is rather small though. Screenshot

Igottheconch 19:24, 25 September 2011 (UTC)

I also found this: http://gmod.org/wiki/Popup_Balloons#Inserting_images_and_other_remote_content_without_AJAX Igottheconch 00:14, 30 September 2011 (UTC)

Here is a screenshot of this balloon images:

http://deadrisingwiki.com/w/images/6/68/Dead_island_example_of_new_map.jpg

Here is the coding of the main map page:

http://deadislandwiki.com/wiki/Template:Resort_map_1

coding with SecureHTML

{| |width=400px| {| |Click names to go to quest • Hover over names to see screenshot • [[Resort#Locations|Full map]] |align="right" width="100px"|{{navbar|Resort map 1|mini=y}} |} {|align=center | <div style="position:relative;"> [[File:Resort map first quests.jpg|link=|576px]] <div style="position: absolute; left: 120px; top: 30px; padding: 1em;"> {{#shtml:Template:Popup Hotel Entrance dot}} </div> <div style="position: absolute; left: 160px; top: 55px; padding: 1em;"> {{#shtml:Template:Popup Restroom Hit and Run dot}} </div> <div style="position: absolute; left: 327px; top: 80px; padding: 1em;"> {{#shtml:Template:Popup Lifeguard Tower dot}} </div> <div style="position: absolute; left: 335px; top: 175px; padding: 1em;"> {{#shtml:Template:Popup Surf Shop dot}} </div> <div style="position: absolute; left: 355px; top: 105px; padding: 1em;"> {{#shtml:Template:Popup 2nd stairs dot}} </div> <div style="position: absolute; left: 240px; top: 255px; padding: 1em;"> {{#shtml:Template:Popup 1st stairs dot}} </div> <div style="position: absolute; left: 250px; top: 300px; padding: 1em;"> {{#shtml:Template:Popup Pool House dot}} </div> <div style="position: absolute; left: 275px; top: 410px; padding: 1em;"> {{#shtml:Template:Popup bunker dot}} </div> <div style="position: absolute; left: 5px; top: 5px; padding: 1em;"> {{#shtml:Template:Popup Hotel Pool}} </div> <div style="position: absolute; left: -5px; top: 80px; padding: 1em;">{{#shtml:Template:popup Parking Garage}}</div> <div style="position: absolute; left: 125px; top: -10px; padding: 1em;">{{#shtml:Template:popup Hotel Entrance}}</div> <div style="position: absolute; left: 180px; top: 35px; padding: 1em;">{{#shtml:Template:Popup Restroom Hit and Run}}</div> <div style="position: absolute; left: 20px; top: 310px; padding: 1em;">{{#shtml:Template:Popup 10-Steve}}</div> <div style="position: absolute; left: 120px; top: 260px; padding: 1em;">{{#shtml:Template:popup 11-Passport to Life}}</div> <div style="position: absolute; left: 70px; top: 190px; padding: 1em;">{{#shtml:Template:popup 14}}</div> <div style="position: absolute; left: 90px; top: 170px; padding: 1em;">{{#shtml:Template:popup 15}}</div> <div style="position: absolute; left: 230px; top: 200px; padding: 1em;">{{#shtml:Template:popup 1st stairs}}</div> <div style="position: absolute; left: 135px; top: 320px; padding: 1em;">{{#shtml:Template:popup 4}}</div> <div style="position: absolute; left: 125px; top: 175px; padding: 1em;">{{#shtml:Template:popup 17 Omar Hit and Run}}</div> <div style="position: absolute; left: 290px; top: 420px; padding: 1em;">{{#shtml:Template:popup bunker}}</div> <div style="position: absolute; left: 340px; top: 50px; padding: 1em;">{{#shtml:Template:popup Lifeguard Tower}}</div> <div style="position: absolute; left: 120px; top: 200px; padding: 1em;">{{#shtml:Template:popup Out Of Stock}}</div> <div style="position: absolute; left: 115px; top: 225px; padding: 1em;">{{#shtml:Template:Popup_Out_Of_Stock_dot}}</div> <div style="position: absolute; left: 360px; top: 170px; padding: 1em;">{{#shtml:Template:popup Surf Shop}}</div> <div style="position: absolute; left: 385px; top: 100px; padding: 1em;">{{#shtml:Template:popup 2nd stairs}}</div> <div style="position: absolute; left: 280px; top: 300px; padding: 1em;">{{#shtml:Template:popup Pool House}}</div> <div style="position: absolute; left: 360px; top: 0px; padding: 1em;">{{#shtml:Template:popup Lazarus Rising Engine Parts}}</div> <div style="position: absolute; left: 290px; top: 55px; padding: 1em;"> {{#shtml:Template:Popup car part 1}} </div> <div style="position: absolute; left: 290px; top: 5px; padding: 1em;"> {{#shtml:Template:Popup car part 2}} </div> <div style="position: absolute; left: 315px; top: 5px; padding: 1em;"> {{#shtml:Template:Popup car part 3}} </div> </div> |} |} |}

Here is the coding of the individual items tempalte pages for each dispalyed main image and pop up image:

Protected page with SecureHTML
<span onmouseover="balloon.showTooltip(event,'<img src=\'/w/images/thumb/4/43/Dead_island_Bungalow_10_with_steve.png/400px-Dead_island_Bungalow_10_with_steve.png\' /><br><b>Hotel Bungalow 10<br>Steve Summers</b>')"><a href="/wiki/Steve Summers"><img alt="popup 10-Stephen.png" src="/w/images/8/81/Popup_10-Stephen.png" /></a></span>

Igottheconch 15:02, 3 October 2011 (UTC)

Wow, thanks for those tips! I hope that the functionality will be added to a safer upgrade of this extension, but meanwhile this is incredibly useful. Cavila ^{MW 1.17, MySQL 5.5.16, Php 5.3.8} 11:14, 15 December 2011 (UTC)

problem locating element myContent

when mousing over this:

<balloon title="load:myContent">Mouse over me too!</balloon>

I get this error message pop up:

problem locating element myContent

Screenshot: http://gyazo.com/98a4a4cf5b79724fbd7a381a302c3ac3.png

Igottheconch 18:39, 25 September 2011 (UTC)

contradictory about wiki markup?

These two statements seem to contradict each other:

Only the HTML markup normally allowed by MediaWiki will be rendered inside the popup balloon

For security reasons, only plain text (no HTML or Wiki markup) is allowed, except for an <IMG> tag, if desired.

Igottheconch 18:55, 25 September 2011 (UTC)

Red links

This minor change took me days to figure out. I finally had to go to the coding to accomplish it.

I made it so the links are now red.

red links

<?php /** * This balloon tooltip package and associated files not otherwise copyrighted are distributed under the MIT-style license: * * http://opensource.org/licenses/mit-license.php * * Copyright * * 2007, 2008 Sheldon McKay, Cold Spring Harbor Laboratory * This is a tag extension that uses the reserved tag <balloon> to add JavaScript ajax * popup balloons. See http://mckay.cshl.edu/wiki/index.php/MediaWiki_Balloon_Extension * for documentation. * * @ingroup Extensions * @author Sheldon Mckay (mckays@cshl.edu) * @version 0.4 * @link http://www.mediawiki.org/wiki/Extension:Balloons */ # To activate the extension, include it at the end from your LocalSettings.php # with: require_once("extensions/balloons.php"); if ( defined( 'MW_SUPPORTS_PARSERFIRSTCALLINIT' ) ) { $wgHooks['ParserFirstCallInit'][] = 'wfBalloonTooltips'; } else { $wgExtensionFunctions[] = 'wfBalloonTooltips'; } $wgHooks['OutputPageBeforeHTML'][] = 'addBalloonJavascript'; $wgExtensionCredits['parserhook'][] = array( 'name' => 'Balloons', 'version' => '0.4', 'author' => 'Sheldon McKay', 'description' => 'Balloon tooltips for wiki pages', 'url' => 'http://www.mediawiki.org/wiki/Extension:Balloons' ); function wfBalloonTooltips() { global $wgParser; $wgParser->setHook( 'balloon', 'renderBalloonSpan' ); return true; } # render span element with function renderBalloonSpan( $input, $args ) { $text = $args['title']; # strip HTML from the text inside the <balloon> element, # except for image tags # remove tag contents first $input = preg_replace('/>[^<>]+</','><',$input); $input = strip_tags($input,'<img>'); # be paranoid and remove any event handlers from image tags $input = preg_replace('/\bon[^=]+=\S+/i','',$input); # escape quotes in balloon caption $text = preg_replace('/\"/','\"',$text); $text = preg_replace('/\'/',"\'",$text); $link = isset($args['link'])  ? $args['link']  : ''; $target = isset($args['target']) ? $args['target'] : ''; $sticky = isset($args['sticky']) ? $args['sticky'] : '0'; $width = isset($args['width'])  ? $args['width']  : '0'; $event = isset($args['click']) && $args['click'] && !$link ? 'onclick' : 'onmouseover'; $event = "$event=\"balloon.showTooltip(event,'${text}',${sticky},${width})\""; $event2 = ' '; if (preg_match('/onclick/',$event) && $args['hover']) { $event2 = " onmouseover=\"balloon.showTooltip(event,'" . $args['hover'] . "',0,${width})\""; } $has_style = isset($args['style']) && $args['style']; $style = "style=\"" . ($has_style ? $args['style'] . ";cursor:pointer\"" : "cursor:pointer\""); $target = $target ? "target=${target}" : ''; $output = "<span ${event} ${event2} ${style}>${input}</span>"; if ($link) { $output = "<a href=\"${link}\" ${target}><span style=\"font-family:arial black;color:red;font-style:bold;font-size:22\">${output}</span></a>"; } return $output; } function addBalloonJavascript(&$out) { global $wgScriptPath; $jsPath = "${wgScriptPath}/extensions/balloons/js"; $out->addScript("\n". "<script type=\"text/javascript\" src=\"${jsPath}/yahoo-dom-event.js\"></script>\n" . "<script type=\"text/javascript\" src=\"${jsPath}/balloon.config.js\"></script>\n" . "<script type=\"text/javascript\" src=\"${jsPath}/balloon.js\"></script>\n" . "<script type=\"text/javascript\">\n" . "var balloon = new Balloon;\n" . "BalloonConfig(balloon);\n" . "balloon.images = '${wgScriptPath}/extensions/balloons/images';\n" . "</script>\n" ); return true; }