Puppy Linux Discussion Forum

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

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?

Flash wrote: Thu Sep 29, 2022 4:16 pm

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

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

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

Flash wrote: Thu Sep 29, 2022 4:16 pm

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.

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

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

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

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

[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

rockedge wrote: Sun Oct 02, 2022 12:54 am

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.

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

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

For lazy people
Copy this code:

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:

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

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

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

1. One argument function:

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

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:

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

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

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.