autoTooltip and autoLinktip

[Kender]

Link to Mod

Usage:

[tooltip=I have a Simple Machines Forum myself, you should get one too]SMF Forum[/tooltip] (comma is ok here)

[linktip=http://simplemachines.org/community,Simple Machines; the best friggin forum in the world!]Simple Machines[/linktip] (comma seperates url from text in bubble, so no comma in the actual text)

Linebreaks will keep formatting for the bubble, so for multi line text:
[tooltip=I have a Simple Machines Forum myself,

you should get one too]SMF Forum[/tooltip] -- this will put 2 line breaks in the bubble


Description:

This is a little more advanced version of the [abbr and acronym], where instead of an alt text it gives a "Chat bubble" when you mouseover the linked text (either a span with double underline, or an actual link that you can click going to a website with double underline, indicating it is special.

There is:
- 1 theme change to index.template
- 1 change to subs.php
- 1 css file for the styling of the bubble
- 2 image files
- 1 folder containing .js files (6)

very simple for manual or package install


Compatibility:

Compatable with:
- versions up to 1.1.4
- 2.0 Beta 3 Public


Credits:

based on request of: ameo
found here


If you have any suggestions for improvement or bugs please let me know, I will do my best to correct right away

~ Kender

[dannbass]

Hi Kender! nice mod! the only thing is that it didn't work for me until I moved the

Code Select Expand

array(
'tag' => 'tooltip',
'type' => 'unparsed_equals',
'before' => '<span class="autoTooltip" title="$1">',
'after' => '</span>',
'quoted' => 'optional',
'disabled_after' => ' ($1)',
),
array(
'tag' => 'linktip',
'type' => 'unparsed_commas',
'before' => '<a href="$1" title="$2" class="autoTooltip" target="_blank">',
'after' => '</a>',
'quoted' => 'optional',
'disallow_children' => array('email', 'ftp', 'url', 'iurl'),
'disabled_after' => ' ($1)',
),

Where all the bbc are located in the Subs.php... so they will appear in the /index.php?action=postsettings;sa=bbc otherwise I just got [tooltip=whatever]aa[/tooltip] written out as a nobbc.


Any ideas why?
Thanks for the mod!

[Kender]

the install should place this code in the bbc section of subs.php, not sure why it didnt do so on your install

[dannbass]

I was looking at my Subs.php and I know what happened... I have two mods, the custom bbc and a table from CSV and they moved the original ); that should be the end, up and the autoTooltip got after it.

Thanks for replying, my mistake!

[Kender]

I'm glad it wasn't anything I did, but I am sorry that you had issues!

have fun using the mod!

[ameo]

hi Kender.

I wonder where could I change font  shown in bubble and color of bubble, and how 2 do it?

[Kender]

it has its own stylesheet

forumurl/Themes/default/autoTooltips.css

it is in the default theme, not in any custom theme, so no need to copy it over to another directory

there you can set the width of the bubble, font (size type and color), and background color (under base tooltip styles)

you can also set a transparency here, but i did not

* note, if you change the background color of the bubble, you need to change the 2 image files also (these have transparent backgrounds so you need to use an editor that can handle this)

[dannbass]

I have an idea... I use this basic code to have popup windows for the bbc codes, like the URL or the IMG.

The only thing is that it will launch a single line and it'll be nice to have a text area to write instead of the single line.

Also, to use BBC in the tooltip part, somebody wanted to put [b]...[/b] but couln't and I don't know how to add that.

Well, here is the code, it works fine, just need to write the code for the Post.php so there is a buttom in the Post.template.php

This goes in the Post.template.php

Code Select Expand

// Java script to handle tooltip input boxes ...
    echo '<script language="JavaScript" type="text/javascript">
          // <!' . '--
          function tooltipINPT()
  {
          // Enter tooltip .........................................
          var tooltipLINK = prompt("This is the bubble text");
          if (tooltipLINK == null )
{
//cancel pressed . . .
          }
          else if (tooltipLINK == "" || tooltipLINK == " ")
{
//ok pressed but with Notext . . .
                  alert("Sorry no text entered!");
          }
          else
          {
    //ok pressed and there is something :)
          // Enter Description ...................................
          var tooltipNAME = prompt("This is the text to hover with the mouse","");
          if (tooltipNAME == null )
{
//cancel pressed . . .
          }
          else if (tooltipNAME == "" || tooltipNAME == " ")
{ 
//ok pressed but with notext so use URL only!
                    surroundText(\'[tooltip]\'+tooltipLINK+\'\', \'[tooltip]\', document.', $context['post_form'], '.', $context['post_box_name'], ');
          }
          else //ok pressed with text so use URL and Name!
                    surroundText(\'[tooltip=\'+tooltipLINK+\']\'+tooltipNAME+\'\', \'[/tooltip]\', document.', $context['post_form'], '.', $context['post_box_name'], ');
          }
          }
          // --' . '>
          </script>';

Code Select Expand

// only replace the tooltip tag! . . . . . . . . . . .
      if (isset($tag['code']) && $tag['code'] == 'tooltip')
{
          echo '<a href="javascript:void(0);" onclick="tooltipINPT(); return false;"><img onmouseover="bbc_highlight(this, true);" onmouseout="if (window.bbc_highlight) bbc_highlight(this, false);" src="', $settings['images_url'], '/bbc/', $image, '.gif" align="bottom" width="23" height="22" alt="', $tag['description'], '" title="', $tag['description'], '" border="0" style="background-image: url(', $settings['images_url'], '/bbc/bbc_bg.gif); margin: 1px 2px 1px 1px;" /></a>';
continue;
}

Thanks!

[Kender]

My goal in making this was to provide something that could do the job without major theme changes

if you would like to write a proper find/replace i will gladly add it for people who want to add that functionality though

please be advised though that when adding text strings you should add them as

Code Select Expand

var tooltipNAME = prompt(" , '  $tootTip['promot'] ' ,","");
and add a line to Themes/default/languages/modifications.english.php

Code Select Expand

$toolTip['prompt'] = 'This is the text to hover with the mouse';

[dannbass]

Yes of course, the text strings... I usually put stuff and don't bother to make it $txt but if your goal was to make it simple then we can just leave it like that, is easy enough to work as it is.

Thanks thought!

[samvirtual]

I

Hi Kender! nice mod! the only thing is that it didn't work for me until I moved the

Code Select Expand

array(
'tag' => 'tooltip',
'type' => 'unparsed_equals',
'before' => '<span class="autoTooltip" title="$1">',
'after' => '</span>',
'quoted' => 'optional',
'disabled_after' => ' ($1)',
),
array(
'tag' => 'linktip',
'type' => 'unparsed_commas',
'before' => '<a href="$1" title="$2" class="autoTooltip" target="_blank">',
'after' => '</a>',
'quoted' => 'optional',
'disallow_children' => array('email', 'ftp', 'url', 'iurl'),
'disabled_after' => ' ($1)',
),

Where all the bbc are located in the Subs.php... so they will appear in the /index.php?action=postsettings;sa=bbc otherwise I just got [tooltip=whatever]aa[/tooltip] written out as a nobbc.


Any ideas why?
Thanks for the mod!

I had the identical issue, and was left wondering why this thing is not working even after a clean install. But this post addresses this issue. thanks a lot for the fix and this mod. love it.

[Kender]

I had the identical issue, and was left wondering why this thing is not working even after a clean install. But this post addresses this issue. thanks a lot for the fix and this mod. love it.

Thats what i love to hear, glad you like the mod!

[dannbass]

I had the identical issue, and was left wondering why this thing is not working even after a clean install.

The problem is that if you have another mod that also modifies the

<search for>
      );

      // This is mainly for the bbc manager, so it's easy to add tags above.  Custom BBC should be added above this line.
</search for>

<add before>
that part then the last the " ); " is pushed up and the array is not contained there.

Kender, maybe a way to solve this have a <replace> in the mod file instead of <add before>
and a place to replace could be this one...

Code Select Expand

<search for>
array(
'tag' => 'time',
'type' => 'unparsed_content',
'content' => '$1',
'validate' => create_function('&$tag, &$data, $disabled', '
if (is_numeric($data))
$data = timeformat($data);
else
$tag[\'content\'] = \'[time]$1[/time]\';'),
),
</search for>
<replace>
array(
'tag' => 'time',
'type' => 'unparsed_content',
'content' => '$1',
'validate' => create_function('&$tag, &$data, $disabled', '
if (is_numeric($data))
$data = timeformat($data);
else
$tag[\'content\'] = \'[time]$1[/time]\';'),
),
array(
'tag' => 'tooltip',
'type' => 'unparsed_equals',
'before' => '<span class="autoTooltip" title="$1">',
'after' => '</span>',
'quoted' => 'optional',
'disabled_after' => ' ($1)',
),
array(
'tag' => 'linktip',
'type' => 'unparsed_commas',
'before' => '<a href="$1" title="$2" class="autoTooltip" target="_blank">',
'after' => '</a>',
'quoted' => 'optional',
'disallow_children' => array('email', 'ftp', 'url', 'iurl'),
'disabled_after' => ' ($1)',
),
</replace>

Anyway, that could avoid the conflict with the rest of the mods.

[Kender]

I am working on another modificaiton for this mod to give it a little more useability and functionality, i will be sure to add the replace instead of before on the update

thanks for the idea

[ameo]

could you please, if possible, at least include Sweet titles of Dustin Diaz as one of styles in new modification of mod? I'd really look forward to see this as default.

[Kender]

to get the look of this, in the stylesheet - style.css
look for :

/* Base Tooltip Styles */

.tt { ....

change the "background-color" to :: #000000;  // (black)
for text change the "color" to the desired color you want

to add transparency to it so that you can see through it add the following lines

Code Select Expand


.tt {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}


this will give a 50% transparency, if its TOO seethrough than make the numbers larger, if its not see through enough then make the number smaller

[ameo]

what should be changed to take effect in custom themes, and not only in default?

[Kender]

nothing in this mod changes custom themes, except for the css/js addition, it should work the same for every theme

[ameo]

yes, but it doesn't show in every theme by default. what needs to be done so it could be shown in custom theme?

[Kender]

did you insert the code to display the JS pages on your themes index.template.php ?