XF 2.2 Prefix - Tooltips

[Sado Yasashii]

Can you, please tell me, how to display tooltips for prefixes?

I need a tooltip with a description of the prefix to pop up when users hover over the prefix. Is it possible?


"Description" - still not clear where it is displayed... If you can, please give me a hint with this.

"Prefix usage help" - the description is only displayed when creating a post/resource.

Is it possible to make a tooltip with the output of one of the fields shown?

 

[TPerry]

If you use the Description option... it will show after selected.

 

[Sado Yasashii]

If you use the Description option... it will show after selected.

Thank you for the clarification, at least I understand where the "Description" is displayed. It's not very convenient in XFRM. I'm primarily interested in the ability to pop up tooltips when viewing XFRM prefixes. Can you help me with this question?

For example, I want to display the prefix not in text but in an icon (font awesome), but without a tooltip this principle is not relevant to use.

 

[TPerry]

I think that's where being precise in your prefix definition comes into play. Prefixes should really never be more than 2 words long, and those 2 words should get the point of what it pertains to across without need of defintion.

 

[Sirmadsen]

You can use the styling option to add a title that will pop up when hovering over a link. I don't currently have Xen installed but a example code would look like

<a href="{tagUrl}" title="Description that will pop up when hovered">{tagTitle}</a>

Change the shortcodes accordingly since your screenshot don't show the Display styling options.

I'm also not sure if this works at all for XenForo but it should apply everywhere where you can use html styling.

 

[Sado Yasashii]

You can use the styling option to add a title that will pop up when hovering over a link. I don't currently have Xen installed but a example code would look like

<a href="{tagUrl}" title="Description that will pop up when hovered">{tagTitle}</a>

Change the shortcodes accordingly since your screenshot don't show the Display styling options.

I'm also not sure if this works at all for XenForo but it should apply everywhere where you can use html styling.

Thank you for the example, it may be useful to someone. I was able to solve my problem by writing an array and adapting my prefixes through modifiers. I was able to display a tooltip on the header of the prefix, which is what I needed. Display it in the description, as I wrote above is not relevant. Also, if you're using Multi-Prefix plugin, then using a description of the prefix makes no sense.
Here's what I got:

Spoiler: Ready sample

As you can see from the example, in the prefixes are displayed icons and when you hover its name is displayed. In the design of the resource, when you select a prefix, then after selecting and hovering you will see the name, not very convenient, but in another way not solved. Perhaps requires improvement, but I'm fine with it. Filtering by prefix also works.

This is actually what I needed to implement. It's a pity that the solution from XF for 1 prefix does not provide an opportunity to do otherwise, so without modifications there is no way.

 

[Sirmadsen]

Thank you for the example, it may be useful to someone. I was able to solve my problem by writing an array and adapting my prefixes through modifiers. I was able to display a tooltip on the header of the prefix, which is what I needed. Display it in the description, as I wrote above is not relevant. Also, if you're using Multi-Prefix plugin, then using a description of the prefix makes no sense.
Here's what I got:

Spoiler: Ready sample

View attachment 279907
View attachment 279908
View attachment 279912
View attachment 279909

As you can see from the example, in the prefixes are displayed icons and when you hover its name is displayed. In the design of the resource, when you select a prefix, then after selecting and hovering you will see the name, not very convenient, but in another way not solved. Perhaps requires improvement, but I'm fine with it. Filtering by prefix also works.

This is actually what I needed to implement. It's a pity that the solution from XF for 1 prefix does not provide an opportunity to do otherwise, so without modifications there is no way.

May I ask what addons you used to achieve this and what theme you are using?

 

[Sirmadsen]

I'm trying to achieve the same thing but when I add a icon the whole first part of the name becomes a link to the prefix.

 

[Sado Yasashii]

May I ask what addons you used to achieve this and what theme you are using?

To display prefixes:

Multi Prefix

Multiple Prefixes! Ever run into a situation where you want to prefix a thread with multiple tags? Now you can. All the same features still work, clicking a prefix shows all threads prefixed with that same prefix. Searching for a prefix will...

xenforo.com

[SC] Prefix Filter

Description : This add-on allows you to add a prefix filter when browsing your forum. Feature summary : Options : Label color : Red Green Olive Light green Blue Royal blue Sky blue Gray Silver Yellow Orange Error Hide prefixes not used Hide...

xenforo.com

The simplest option for you to use is this:

Spoiler: Icon only

extra.less:

/*** Prefix Pack A ***/
.label.label--CUSTOM-PREFIX-NAME {
    background: #CD7F32;
    color: #fafafa;

    .label:not(.menuPrefix)& {
        font-size: 0;
    }

    &:hover {
        background: #4A4E51;
        color: #fafafa;
    }
    &:before {
        .m-faBase();
        .m-faContent(@fa-var-cogs);
        padding-right: 5px;
        font-size: @xf-fontSizeNormal;
        padding-left: 5px;

        .label:not(.menuPrefix)& {
            font-size: @xf-fontSizeNormal;
        }
    }
}
/**********/

Spoiler: Icon with text

extra.less:

/*** Prefix Pack A ***/
.label.label--CUSTOM-PREFIX-NAME {
    background: #CD7F32;
    color: #fafafa;
    &:hover {
        background: #4A4E51;
        color: #fafafa;
    }
    &:before {
        .m-faBase();
        .m-faContent(@fa-var-cogs);
        padding-right: 5px;
    }
}
/**********/

Spoiler: This example performs basic functionality out of the XF box to display an icon with text

extra.less:

/* #### Thread Prefixes #### */
.label
{
    &:before
    {
        padding-right: 4px;
        .m-faBase();
    }
    &.label--
    {
        &CUSTOM-PREFIX-NAME:before
        {
            .m-faContent(@fa-var-bullhorn);
        }
    }
}

core_labels.less add after line 77:
&.label--CUSTOM-PREFIX-NAME { .m-labelVariation(white, #ff8800); }

I got it here:

Creating custom prefix styling

By default, XF comes with the following prefix styles: Creating custom styling using the Other, using custom CSS class name option is fairly straightforward. This guide will explain how to. The easiest way by far to add new prefix styling...

xenforo.com

[cXF] Thread prefix icons

Would you like to customize your prefixes? Here's a simple DIY tutorial as an example. Of course, you can extend it for your own needs as you wish. So, read this tutorial to achieve something like this: 1. Create your custom prefix In...

xenforo.com

As for the tooltip, it is a personal modification. You can do it yourself, if you need it.

Theme:

Elegant Dark

Elegant Dark is developed to professional structure, flexible and multipurpose forum theme with excellent responsive design for XenForo 2.1+. Elegant Dark is a functional design with advanced personalization features. It is a user-friendly...

xenforo.com

 

[Sirmadsen]

As for the tooltip, it is a personal modification. You can do it yourself, if you need it.

Thanks a lot! Half way there, now all I need is the pop up text when hovering, how did you achieve that if it's not to much trouble?

 

[Sado Yasashii]

На полпути, теперь все, что мне нужно, это всплывающий текст при наведении курсора, как вы этого добились, если это не слишком сложно?

No less than 6 modifications of templates applied to implement the tooltips in the right places... It was problematic enough to do. For such a case it is better to make a plugin, but I do not know how. Therefore, for such a task needs a performer. I can not share this. I told you where to start, I can only show you what templates you need to work through. Work it out from there on your own.

 

[Sirmadsen]

Thanks for helping!