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>
css textbox on image popup
Re: css textbox on image popup
I tried
and
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.
Code: Select all
<style>.MCPopupContainer::after {content: "Image one"; }</style>
and
Code: Select all
<style>.MCPopupContainer::after {content: "Image two"; }</style>
I even edited it back into the output but both images got "Image two" displayed.
-
- Jr. Propeller Head
- Posts: 7
- Joined: Mon Jan 24, 2022 4:49 am
Re: css textbox on image popup
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:
The only modification needed in your existing CSS, is the content style setting as shown here:
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
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" ...
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>
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