How to show the field description as popup in the filter and detail pages

chrisgraf
Topic Author
Offline
New Member

6 years 4 months ago #73984 by chrisgraf

How to show the field description as popup in the filter and detail pages was created by chrisgraf

For some of my fields I set the Desciption in Edit field -> Item form which is shown when adding / editing a type in the frontend. I additionally want this popup to be shown in the category filter page and in the detail page of the type.

For the filter page I found an option under Edit category -> Search/Filter form -> Basic which is called "Instructions" and set to "Yes, as popup tooltip" but nothing is shown. Where can I edit these instructions?

As for the detail page I have no clue how to set this up - this is probably not a implemented feature yet, right? how could I do this?

thanks!

Please Log in or Create an account to join the conversation.

ggppdk
Offline
Administrator

6 years 4 months ago #74081 by ggppdk

Replied by ggppdk on topic How to show the field description as popup in the filter and detail pages

Hello

the description text of fields is only meant for edit form
so it does not display in filtering form

you can use CSS to add a ::before or ::after CSS element with tooltip text

Code:

.fc_filter_label {
    position: relative !important;
}

.fc_filter_label:hover {
    color: #c00 !important;
    text-decoration: none﻿ !important;
}

.fc_filter_label:hover:after {
    background: #111;
    background: rgba(0,0,0,.8);
    border-radius: .5em;
    bottom: 1.35em;
    color: #fff;
    display: block;
    left: 1em;
    padding: .3em 1em;
    position: absolute;
    text-shadow: 0 1px 0 #000;
    white-space: nowrap;
    z-index: 98;
}

.fc_filter_label:hover:before {
    border: solid;
    border-color: #111 transparent;
    border-color: rgba(0,0,0,.8) transparent;
    border-width: .4em .4em 0 .4em;
    bottom: 1em;
    content: "";
    display: block;
    left: 2em;
    position: absolute;
    z-index: 99;
}

.fc_label_field_170.fc_filter_label:hover:after {
    content: 'Some text 1';
}

.fc_label_field_155.fc_filter_label:hover:after {
    content: 'Some text 2';
}

.fc_label_field_147.fc_filter_label:hover:after {
    content: 'Some text 3';
}

you may also add language class to body to customize per language too ...

-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...

Please Log in or Create an account to join the conversation.