Forum Tooltips

[Brian]

Download

Description
Adds stylized tooltips to the forum when hovering over various elements with titles (such as @usernames when hovering over display names or titles on images). Also comes with the option to add tooltips to any tags or elements you know the ID or class of. Includes options to add tooltip-based features to various other plugins as well.

Now supports showing full attachment images when hovering over any images attached to your post!




Preview



How to Use
Simply install the plugin from the plugin library and check or uncheck anything within the plugin settings that you'd like to add tooltips to. If you have any of the plugins in the Plugin Add-ons tab installed you can choose whether or not to add various tooltip-based features to their existing functionality.

If you're familiar with CSS you can add new selectors to the existing list in the Custom Elements section and choose what text you'd like to show for the tooltips. If the element you're adding the tooltip to already has title text you can type $[inherit] into the Tooltip Text column to use the existing title text in your tooltip.



Add-ons for other plugins
Please note that the Forum Tooltips plugin needs to be at the bottom of your plugin list for these features to work in the plugins below.

Different On/Off Icons for Different Boards by Shorty

• Add tooltips to custom board icons that are missing title attributes

User Legend - Blocks by Brian

• Replace hover text with tooltips above each block

Auto-Embed Image Links by Brian

• Replace thumbnail hover text with tooltips
• Show full image in tooltip when hovering over thumbnails

Image Resize by Todge

• Remove resize message and replace with tooltips
• Remove resize message and show full image in tooltip when hovering over thumbnails

Styles
Add this to the bottom of Themes > Advanced Styles & CSS > Style Sheet on any of your themes to change the tooltip colors. Change any of the colors in green to your preferred hex colors for the tooltips to use.

/* Forum Tooltips */
@ttp_background: #444444;
@ttp_text_color: #ffffff;
@ttp_border_color: @ttp_background;

#tiptip_holder.tip_top #tiptip_arrow { border-top-color: @ttp_border_color !important; }
#tiptip_holder.tip_top #tiptip_arrow_inner { border-top-color: @ttp_background !important; }
#tiptip_holder.tip_bottom #tiptip_arrow { border-bottom-color: @ttp_border_color !important; }
#tiptip_holder.tip_bottom #tiptip_arrow_inner { border-bottom-color: @ttp_background !important; }
#tiptip_holder.tip_left #tiptip_arrow { border-left-color: @ttp_border_color !important; }
#tiptip_holder.tip_left #tiptip_arrow_inner { border-left-color: @ttp_background !important; }
#tiptip_holder.tip_right #tiptip_arrow { border-right-color: @ttp_border_color !important; }
#tiptip_holder.tip_right #tiptip_arrow_inner { border-right-color: @ttp_background !important; }
#tiptip_content { background-color: @ttp_background !important; color: @ttp_text_color !important; border-color: @ttp_border_color !important; }

[♥ ℒʊ√ ♥]

Hi, TinMachine ~

When you hover over certain areas, such as threads, a box appears where you can read what's on the opening post without actually opening it.

It's been showing here in support since sometime this p.m. for me.

[Brian]

May 9, 2014 19:25:11 GMT -8 TinMachine said:

I'm a bit confused as to what this is for? What's a tooltip exactly?

Hover over any user's display name, a timestamp, or a thread's name in a board here on Support. The text that shows up in the fancy bubble is known as a tooltip.

[Former Member]

Hi, Brian Excellent Plugin

I'm having a bit of trouble of finding the ID's or how to go about finding them

Like: Edit - Quote - Create Thread - Reply

Also I had a problem with this code that was added to Global Headers
That adds the recent threads and birthdays buttons next to the participated button



The Problem I found was that on each on the buttons
It showed the same tooltip message that was set to show for only the participated button

So I had to disable the show participated tooltip on the Forum Tooltips plugin settings
Is there anything I could do or add so it will show a diffferent tooltip for each of those buttons
That are next to the participated button.  - Note: you only see those buttons once logged in

The code

<script>

$(function(){
var recent = $("a.recent-threads-button");

recent.clone().attr("href", "/threads/recent").html("Recent Poems").insertBefore($("#navigation-tree"));

recent.clone().attr("href", "/members?view=birthdays").html("Today's Birthdays").insertBefore($("#navigation-tree"));
});

</script>

Thanks for any help suggestions

Steve

[Brian]

@xsteveuk, that's why that section is labeled as advanced.

Not sure why you'd need to label something that already has text, but the Quote and Edit buttons are .quote-button and .edit-button respectively.

Assuming you haven't added any other buttons alongside them in the title bar you can grab the Create Thread button with .container.threads > .title-bar > .controls li a and the Reply button with .container.posts > .title-bar > .controls li a on a default theme. They don't have any unique classes that specifically mention their name, though you could add them in the layout templates if necessary.


As for the code that clones your participated button, change that code to this.

<script>
$(function(){
var recent = $("a.recent-threads-button");
recent.addClass('participated');
recent.clone().addClass('thread-list').removeClass('participated').attr("href", "/threads/recent").html("Recent Poems").insertBefore($("#navigation-tree"));
recent.clone().addClass('birthdays').removeClass('participated').attr("href", "/members?view=birthdays").html("Today's Birthdays").insertBefore($("#navigation-tree"));
});
</script>

Now you can address them like so:


Participated

.recent-threads-button.participated

Recent Poems

.recent-threads-button.thread-list

Today's Birthdays

.recent-threads-button.birthdays

[Former Member]

A BIG THANK YOU - Brian
ALL working now - Thanks again for all your help

Steve

[Former Member]

I just wanted to pop in here and say that I adore this plugin. I didn't realize how much I needed until now. Thank you so very much for providing it.

[Alanna 🥀🖤]

May 10, 2014 9:10:53 GMT -8 Brian said:

@xsteveuk, that's why that section is labeled as advanced.

Not sure why you'd need to label something that already has text, but the Quote and Edit buttons are .quote-button and .edit-button respectively.

Assuming you haven't added any other buttons alongside them in the title bar you can grab the Create Thread button with .container.threads > .title-bar > .controls li a and the Reply button with .container.posts > .title-bar > .controls li a on a default theme. They don't have any unique classes that specifically mention their name, though you could add them in the layout templates if necessary.


As for the code that clones your participated button, change that code to this.

<script>
$(function(){
var recent = $("a.recent-threads-button");
recent.addClass('participated');
recent.clone().addClass('thread-list').removeClass('participated').attr("href", "/threads/recent").html("Recent Poems").insertBefore($("#navigation-tree"));
recent.clone().addClass('birthdays').removeClass('participated').attr("href", "/members?view=birthdays").html("Today's Birthdays").insertBefore($("#navigation-tree"));
});
</script>

Now you can address them like so:


Participated

.recent-threads-button.participated

Recent Poems

.recent-threads-button.thread-list

Today's Birthdays

.recent-threads-button.birthdays

Unfortunately, seems like it's not working when for me? adoxographyv2.boards.net/

[Former Member]

have you got the new code in GLOBAL HEADERS

[Brian]

May 10, 2014 20:17:12 GMT -8 @khristian said:

Unfortunately, seems like it's not working when for me? adoxographyv2.boards.net/

You need to remove the old entry for .recent-threads-button in the plugin settings if you want it to show your new entries on the list.

[Brian]

May 11, 2014 12:08:31 GMT -8 TinMachine said:

I've noticed my forum already shows me a preview of the thread when hovering over it with mouse cursor. Is that a Google Chrome thing or?

That's the title text that shows normally. The plugin can convert that into a tooltip in case you want to change its color using the CSS provided in the first post of this thread.

[Alanna 🥀🖤]

May 11, 2014 8:13:30 GMT -8 Brian said:

May 10, 2014 20:17:12 GMT -8 @khristian said:

Unfortunately, seems like it's not working when for me? adoxographyv2.boards.net/

You need to remove the old entry for .recent-threads-button in the plugin settings if you want it to show your new entries on the list.

That allowed the today's birthdays to work but not recent threads?

[Alanna 🥀🖤]

May 11, 2014 13:03:10 GMT -8 TinMachine said:

May 11, 2014 12:11:49 GMT -8 Brian said:

That's the title text that shows normally. The plugin can convert that into a tooltip in case you want to change its color using the CSS provided in the first post of this thread.

Title text? 

It shows me the first few lines of what is in the opening post.

Yes, that is what the title text for the threads are. Title text is title="TEXT" that is added to images and links that appear when hovered.

[Brian]

May 11, 2014 13:03:10 GMT -8 TinMachine said:

May 11, 2014 12:11:49 GMT -8 Brian said:

That's the title text that shows normally. The plugin can convert that into a tooltip in case you want to change its color using the CSS provided in the first post of this thread.

Title text? 

It shows me the first few lines of what is in the opening post.

Correct. ProBoards shows a small amount of the post when hovering over the thread subject when viewing a board.

You can read more about the title attribute and how it works in HTML here: www.w3schools.com/tags/att_global_title.asp

[Brian]

May 11, 2014 12:40:02 GMT -8 @khristian said:

May 11, 2014 8:13:30 GMT -8 Brian said:

You need to remove the old entry for .recent-threads-button in the plugin settings if you want it to show your new entries on the list.

That allowed the today's birthdays to work but not recent threads?

You changed the class to recent-threads in the code, while in the plugin you still have it targeting thread-list.