css textbox on image popup

This forum is for all Flare issues not related to any of the other categories.
Post Reply
rgoonan
Jr. Propeller Head
Posts: 2
Joined: Sun Mar 24, 2019 9:49 pm

css textbox on image popup

Post by rgoonan »

Hi All
My help site currently uses callout boxes from Snagit hard coded onto the captured images.
I'm trying to work out if I can do that with a css text box instead but my css skills are a bit lacking.
If I add the following css to the page, It's close to what I'm trying to achieve but has the text "Fish!" for every image.
Is it possible to specify the content dynamically against each image?
Thanks in advance for any advice.

<style>
.MCPopupContainer::after
{
position: absolute;
background-color: red;
color:white;
top: 70px;
left: 250px;
display: block;
content: "Fish!";
border: solid 2px Red;
border-radius: 5px;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
text-align: center;
}
</style>
rgoonan
Jr. Propeller Head
Posts: 2
Joined: Sun Mar 24, 2019 9:49 pm

Re: css textbox on image popup

Post by rgoonan »

I tried

Code: Select all

<style>.MCPopupContainer::after {content: "Image one"; }</style>

and

Code: Select all

<style>.MCPopupContainer::after {content: "Image two"; }</style>
in the body but Flare ignored it when it compiled the page.

I even edited it back into the output but both images got "Image two" displayed.
Alan at jjj
Jr. Propeller Head
Posts: 7
Joined: Mon Jan 24, 2022 4:49 am

Re: css textbox on image popup

Post by Alan at jjj »

I think you can achieve what you want using an almost unbelievable feature of CSS (and one of my favourites) - reading & outputting the value of an HTML attribute.

I'm afraid I don't have direct experience with the MCPopupContainer since this component is not supported in Flare's HTML5 Side Navigation that I use exclusively. However, since you've said that the only thing going wrong is the text being displayed in the popup, then the following should fix your issue.

In your topic HTML for each individual popup wherever they occur, add the customised text you require in a data-caption attribute. For example:

Code: Select all

... class="MCPopupContainer" data-caption="Image one" ...

... class="MCPopupContainer" data-caption="Image two" ...
The only modification needed in your existing CSS, is the content style setting as shown here:

Code: Select all

<style>
.MCPopupContainer::after
{
position: absolute;
background-color: red;
color:white;
top: 70px;
left: 250px;
display: block;
content: attr(data-caption);
border: solid 2px Red;
border-radius: 5px;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
text-align: center;
}
</style>
I hope this works for you.


If you wish to see an example where I've used this technique (admittedly a bit over the top) to display version numbers consistently, please refer to https://codepen.io/alanatjjj/pen/zYrJJBZ
Post Reply