BBcode [TT] broken? [FIXED]

[MochiMoppel]

It appears that the [TT=tooltip]TT[/TT] code doesn't work anymore. Is it just me or is the code broken?

[Flash]

What's it supposed to do? I've never used it. Can you give a link to a post where you used it and it worked?

[puppy_apprentice]

What's it supposed to do? I've never used it. Can you give a link to a post where you used it and it worked?

https://www.w3schools.com/howto/tryit.a ... ss_tooltip

[rockedge]

I will take a look at it and test to see if it works at all

[rockedge]

Tool tip does work looking at the example

viewtopic.php?t=945&sid=410dc3609ecad53 ... 1ceb2ccd2b

Must look further when I am able to get off the phone

[MochiMoppel]

Can you give a link to a post where you used it and it worked?

See the link posted by rockedge. These tooltips still work*) because at the time the examples were posted the server converted the BBcode to proper CSS code. However the conversion doesn't work anymore when you try to use the same BBcode in new posts.

*) Move mouse cursor over the text marked with dotted underlines or on a smartphone shortly tap on it.

[rockedge]

Here is an example of the new BBCode [tooltip].

Code: Select all

[tooltip=Here is the tooltip working again!!][u]Here[/u][/tooltip] is an example of the new BBCode  [c][tooltip][/c].

[rockedge]

I have adjusted the tooltip BBCode to work again and the syntax looks like this ->

Code: Select all

 [tooltip=Syntax refers to the rules that define the structure of a language.][u]syntax[/u][/tooltip] looks like this

Code: Select all

[tooltip=Adds to the visual effectivness][style=background-image: linear-gradient(red, yellow);font-weight: bold]Hover Here :thumbup2: [/style][/tooltip]

It might work with Hover Here

[MochiMoppel]

I have adjusted the tooltip BBCode to work again

Thanks. Using internally the title attribute is a good idea. This makes it consistent with all other tooltips of this site and removes some shortcomings of the old [TT] tag. Linefeeds within tooltips are now possible, however in this case the text must be enclosed in quotes.

More examples:
Without a visual hint the tooltip in htis text is difficult to spot.
Using a fake [​url] gives nice visual feedback.
A different cursor can help to distinguish a tooltip from a link

I wasn't able to get rid of the permanent underline . Seems to be part the normal style for links in posts, though links outside of posts on this site show this underline only in a hover state, i.e. when placing the mouse over the link.

[puppy_apprentice]

styled tooltip
styled tooltip
styled tooltip
styled tooltip
styled tooltip
styled tooltip

[Grey]

Well, there are two possible options Or we are waiting for beautifully and tastefully decorated topics... or it will be colored, crossed-out topics in the style of elementary school, even if there is no need. But most likely laziness will do its job and nothing will change much

[puppy_apprentice]

For lazy people
Copy this code:

Code: Select all

javascript:(function(){document.activeElement.value=document.activeElement.value+"[tooltip=xyz][style=text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:red]xyz[/style][/tooltip]";})()

and make new bookmark in eg. Bookmarks Toolbar:

Bookmarklet.jpg (21.12 KiB) Viewed 743 times

Choose: Bookmarks>Bookmarks Toolbar>Insert Tooltip to insert styled tooltip code.
xyz

Code: Select all

javascript:(function(){document.activeElement.value=document.activeElement.value+"[style=background-image:linear-gradient(red, yellow);font-weight:bold]xyz[/style]";})()

Gradient.jpg (21.16 KiB) Viewed 730 times

Choose: Bookmarks>Bookmarks Toolbar>Insert Gradient to insert gradient code.
xyz

[puppy_apprentice]

1. One argument function:

Code: Select all

javascript: (function () {
  var txtarea = document.activeElement;
  var selstart = txtarea.selectionStart;
  var selend = txtarea.selectionEnd;
  var sel = txtarea.value.substring(selstart, selend);
  txtarea.setRangeText('[tag start]' + sel + '[/tag end]', selstart, selend, 'select');
})()

Bookmarklets:
Insert Gradient

Code: Select all

javascript:(function(){var txtarea=document.implementacja;var selstart=txtarea.selectionStart;var selend=txtarea.selectionEnd;var sel=txtarea.value.substring(selstart,selend);txtarea.setRangeText('[style=background-image:linear-gradient(red,yellow);font-weight:bold]'+sel+'[/style]',selstart,selend,'select');})()

Usage: Select something and use bookmark.
Select something and use bookmark.

2. Two argument function:

Code: Select all

javascript: (function () {
    var txtarea = document.activeElement;
    var selstart = txtarea.selectionStart;
    var selend = txtarea.selectionEnd;
    var sel = txtarea.value.substring(selstart, selend);
    array = sel.split('=');
  txtarea.setRangeText('[tag start=' + array[1] + ']' + array[0] + '[/tag end]', selstart, selend, 'select');
})()

Bookmarklets:
Insert URL

Code: Select all

javascript:(function(){var txtarea=document.activeElement;var selstart=txtarea.selectionStart;var selend=txtarea.selectionEnd;var sel=txtarea.value.substring(selstart,selend);array=sel.split('=');txtarea.setRangeText('[url='+array[1]+']'+array[0]+'[/url]',selstart,selend,'select');})()

Usage: Write eg. puppy forum=http://forum.puppylinux.com, select and use Insert URL bookmark.
puppy forum

Insert Tooltip

Code: Select all

javascript:(function(){var txtarea=document.activeElement;var selstart=txtarea.selectionStart;var selend=txtarea.selectionEnd;var sel=txtarea.value.substring(selstart,selend);array=sel.split('=');txtarea.setRangeText('[tooltip='+array[1]+'][style=text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:red]'+array[0]+'[/style][/tooltip]',selstart,selend,'select');})()

Usage: Write eg. banana=monkeys favorite fruit, select and use Insert Tooltip bookmark.
banana

TIP: You can unpack bookmarklets using this tool. You can pack js code into bookmarklets using this tool.