Trying to code a semi-complex BBC tag.

The Wicked Flea · May 23, 2006, 10:18:58 AM

Ok. The effect I'm after is commonly known as a tooltip, and I'm doing this via straight CSS. Here's what I'd like to do:

2 tag "formats".
[tip URL Hint_Text]text[/tip]
and
[tip=HINT]text[/tip]

Here's where the coding gets complex for me and where I can't keep up with PHP. To achieve the effect you only need a CSS snippet, simple, and a link. But I'm not certain how the tag output is done. Here's a sample page so you can see how the code for the link+tip goes.

Code Select

<html>
<head>
  <title>CSS Tooltip Example</title>
<style>
a.tooltip {
  text-decoration:none;
  color: steelblue;
  border-bottom: 1px dotted steelblue;
}

a.tooltip span {
  position:absolute;
  display:none;
  z-index: 100;
}

a.tooltip:hover span {
  position:relative;
  top: 4px;
  left: 8px;
  background-color:#FFFF99;
  border: 1px solid black;
  display:block;
  z-index: 25;
  width: 33%;
  text-align:center;
}
</style>
<head>
<body>
<a class="tooltip" href="#">Wikipedia!<span>The free encyclopedia that you can update and revise!</span></a>
<body>
</html>

Would you all help me figure out how to implement this? PHP isn't my speciality, and I don't mind if you end up integrating it with the board software eventually.

Dannii · May 23, 2006, 10:21:37 AM

Have you tried the existing acronym and abbr tags?

The Wicked Flea · May 23, 2006, 10:32:08 AM

I don't even know what they do...

Just looked it up in the help files. No I haven't tried them, but then again I want a css effect that doesn't disappear so fast and can have line breaks.

Dannii · May 23, 2006, 10:34:30 AM

Wikipedia!

If you wanted to code that, you'd want to use bbcode attributes. Have a look at the code in Subs.php.

sbarnes · May 23, 2006, 10:38:02 AM

For details of acronim etc please see: http://docs.simplemachines.org/index.php?topic=735

I could only get one of them to work but they do the same thing anyway.

The Wicked Flea · May 23, 2006, 10:56:23 AM

Thanks for the pointer to the file, I'll check it out. (if you glance upwards you'll note that I edited and said that I looked the tags up)

I prefer the CSS implementation, since if you turn HTML on you could have formatted hints.

The Wicked Flea · May 23, 2006, 11:20:06 AM

Ok guys, question about the image tag and how the optional parameters work. Here's the snippet:

Code Select

			array(
				'tag' => 'img',
				'type' => 'unparsed_content',
				'parameters' => array(
					'alt' => array('optional' => true),
					'width' => array('optional' => true, 'value' => ' width="$1"', 'match' => '(\d+)'),
					'height' => array('optional' => true, 'value' => ' height="$1"', 'match' => '(\d+)'),
				),
				'content' => '<img src="$1" alt="{alt}"{width}{height} border="0" />',
				'validate' => create_function('&$tag, &$data, $disabled', '$data = strtr($data, array(\'<br />\' => \'\'));'),
				'disabled_content' => '($1)',
			),

What I'm actually wondering is the "alt" attribute. I know that this is a string, and am wondering just how this is handled. Must it be in quotation marks in the post, or does the parsing engine find the next "term" to be handled or ending and then determine the string? Also what does the "match" element within the width/height parameters work? I am not sure what it actually does. Is it regex for finding and returning a number only?

Sorry for all the questions, but again, PHP isn't my strong suit.

kegobeer · May 23, 2006, 11:23:43 AM

Yes, alt must be enclosed within quotation marks. That is basic HTML compliance. {width} is replaced with width="" and {height} is replaced with height="", if applicable. Of course, the actual width/height is between the quotation marks.

The Wicked Flea · May 23, 2006, 11:26:00 AM

So in bbc it'd be written as:

Code Select

[img alt="HI!" width=123 height=32][/img]
Correct? If so then I think it's simple enough to write my addition.

Thank you again for all the help guys.

kegobeer · May 23, 2006, 11:30:47 AM

Sorry, I misunderstood your question. No, in the bbc you don't put quotation marks around the alt text.

Code Select


[img alt=hello there width=123 height=123]http://test.jpg[/img]

The Wicked Flea · May 23, 2006, 11:34:45 AM

Ah, ok. Works either way, though, so thank you very much. I'll have to check it out and try it.

I'll let you all know if it turns out.

The Wicked Flea · May 23, 2006, 11:51:13 AM

Quick question. The "href=#" is needed if there is no url specified. How would I go about doing this? I would think one of the boolean expressions like " ? :" would be needed, but again, I'm not sure I won't screw it up.

Here's what I've got so far:

Code Select

			array(
			    'tag' => 'hint',
				'type' => 'parsed_content',
				'parameters' => array(
				    'url' => array('optional' => true, 'value' => ' href="$1"'),
				    'hint_text' => array('optional' => false),
				),
				'before' => '<a class="tooltip"{url}>',
				'after' => '<span>{hint_text}</span></a>',
				'block_level' => true,
			),

The Wicked Flea · May 23, 2006, 12:03:43 PM

Nevermind, I'll just force an url to be specified, even if it's just a # sign.

The Wicked Flea · May 23, 2006, 12:17:45 PM

Here's the resulting code, for any interested:

Code Select

			array(
			    'tag' => 'tooltip',
				'type' => 'parsed_content',
				'parameters' => array(
				    'url' => array('optional' => false, 'quoted' => true, 'value' => 'href="$1"'),
				    'tip' => array('optional' => false),
				),
				'before' => $context['browser']['is_ie'] ? '<a class="tooltip" title="{tip}" href="{url}">' : '<a class="tooltip" {url}>',
				'after' => $context['browser']['is_ie'] ? '</a>' : '<span>{tip}</span></a>',
				'diallow_children' => array('tooltip'),
			),

It is cross browser compatible, since IE currently doesn't support this type of hint.

sbarnes · May 23, 2006, 12:29:45 PM

Looks good,
Where and how is this used again?
Do you add the css styles to the style sheet and add this code to the posttemplate?

Please where and how do I implement this?

The Wicked Flea · May 23, 2006, 01:45:57 PM

Hey guys, sorry but I just tested it and it doesn't work. What'd I do wrong? It's not even parsing.

Code Select

			array(
			    'tag' => 'tooltip',
				'type' => 'parsed_content',
				'parameters' => array(
				    'url' => array('optional' => false, 'quoted' => true),
				    'tip' => array('optional' => false, 'quoted' => true),
				),
				'before' => $context['browser']['is_ie'] ? '<a class="tooltip" title="{tip}" href="{url}">' : '<a class="tooltip" {url}>',
				'after' => $context['browser']['is_ie'] ? '</a>' : '<span>{tip}</span></a>',
				'disallow_children' => array('tooltip'),
			),

(I'll show you what to do, barnes, once it works.

)

The Wicked Flea · May 23, 2006, 02:29:43 PM

Nevermind, I found it myself.

To use it insert these lines into the bottom of your current theme's "style.css":

Code Select

a.tooltip {
  text-decoration:none;
  color: steelblue;
  border-bottom: 1px dotted steelblue;
  position:relative;
}

a.tooltip span {
  display:none;
  z-index: 100;
}

a.tooltip:hover span {
  display:block;
  position: absolute;
  min-width: 196px;
  max-height:3em;
  top: 1.25em;
  left: 1em;
  background-color:#FFFF99;
  border: 1px solid black;
  z-index: 25;
  text-align:center;
  color:black;
}

Open "Subs.php" and find:

Code Select

		$codes = array(
			array(

Then insert after it:

Code Select

			array(
				'tag' => 'tooltip',
				'type' => 'unparsed_content',
				'parameters' => array(
				    'url' => array('quoted' => true),
				    'tip' => array('quoted' => true)
				),
				'block_level' => true,
				'content' => $context['browser']['is_ie'] ? '<a class="tooltip" href="{url}" target="_blank" title="{tip}">$1</a>' : '<a class="tooltip" href="{url}" target="_blank">$1<span>{tip}</span></a>',
				'disallow_children' => array('tooltip'),
			),

Result:

sbarnes · May 23, 2006, 02:41:09 PM

O.k so I add those codes and styles etc, then wrap the text with [tip URL Hint_Text]text[/tip]
and
[tip=HINT]text[/tip]?

By the look of it there is one for normal next and one for parsing urls?
If so wonder how hard it is to add a button for those?

I have done it for a more simple tag but cannot find the post now

QuoteDue to high stress on the server, the search function has been automatically and temporarily disabled. Please try again in a short while.

The Wicked Flea · May 23, 2006, 02:45:48 PM

Code Select

[tooltip url="#" tip="Zis is your HINT!"]hint for you![/tooltip]

You can see it in action here at my test site: http://thewickedflea.com/conv_test/index.php?topic=52.msg217#new

Currently the URL is required, because it must be a "#" if none is specified. I never got a response on how to make the url optional and still get that needed # sign in there when the url is blank. I might try making a 2nd definition where there is no URL element, but I'm busy at the moment.

You can add an image to the "tooltip" class by doing something like:

Code Select

a.tooltip::after
{
  content: url('http://...');
}

The Wicked Flea · May 23, 2006, 02:57:59 PM

Ok, I added the other.

Nevermind the "I'm busy", I was wondering if it'd work anyway.

Find the previous edit in "Subs.php" I mentioned and overwrite it with:

Code Select

			array(
				'tag' => 'tooltip',
				'type' => 'unparsed_content',
				'parameters' => array(
				    'url' => array('quoted' => true),
				    'tip' => array('quoted' => true)
				),
				'content' => $context['browser']['is_ie'] ? '<a class="tooltip" href="{url}" target="_blank" title="{tip}">$1</a>' : '<a class="tooltip" href="{url}" target="_blank">$1<span>{tip}</span></a>',
				'disallow_children' => array('tooltip','url','email','ftp'),
			),
			array(
				'tag' => 'tooltip',
				'type' => 'unparsed_equals_content',
				'content' => $context['browser']['is_ie'] ? '<a class="tooltip" href="#" target="_blank" title="$2">$1</a>' : '<a class="tooltip" href="#" target="_blank">$1<span>$2</span></a>',
				'disallow_children' => array('tooltip','url','email','ftp'),
			),

Code Select

Here's a [tooltip url="http://thewickedflea.com/conv_test/index.php?topic=52.msg217#new" tip="Zis is your HINT!"]hint for you![/tooltip]
[tooltip='Nother Hinty!]Another tip![/tooltip]



adfasraserasdfaseraefasdf

Works either way.

News:

Trying to code a semi-complex BBC tag.