Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Popup textbox

mcovents
Topic Author
Offline
Senior Member

More

3 years 5 months ago #226692 by mcovents

Popup textbox was created by mcovents

Please help us help you and fill where relevant:
Your LimeSurvey version: Version 3.28
Own server or LimeSurvey hosting: Ubuntu server
Survey theme/template: Fruity
==================
Hello,
I'm trying to use some CSS to create a popup textbox when the respondent hovers over certain parts of the text in the group and question text.
source of the script I'm using: [url] www.w3schools.com/css/tryit.asp?filename=trycss_tooltip [/url]
I created a new template (extended fruit) for my survey and added the style part of the code to the custom.css file.
But when I preview the survey the text that should be hoverable just disappears.
I created a small test survey where you can view this behaviour.
[url] tpsurvey.ugent.be/limesurvey328/index.php/737217?lang=nl [/url]
When I view the source code of the page while previewing the survey I can't find the code that I added to the custom.css file.
I'm a forgetting something?
Thanks in advance,
Marc.

Please Log in to join the conversation.

Joffm
Away
LimeSurvey Community Team

More

3 years 5 months ago #226693 by Joffm

Replied by Joffm on topic Popup textbox

Hi,
LimeSurvey is based on bootstrap.
Therefore you may use all features bootstrap offers.
[url] getbootstrap.com/docs/3.4/javascript/ [/url]

See here some small examples of tooltips and popovers in a question.

Here the question text

Code:

<a data-container="body" data-toggle="tooltip" date-html="true" href="#" title="Größte in Deutschland heimische Art">Rossameise</a> oder doch eine <a data-content="Diese Arten sind alle kleiner als die Rossameise" data-html="true" data-placement="top" data-toggle="popover" data-trigger="focus hover" href="#" role="button" tabindex="0" title=" "> andere Art?</a>
<script>
$('[data-bs-toggle="popover"]').popover();
$('[data-bs-toggle="tooltip"]').tooltip();
</script>

And an answer option thes same way

Code:

<a href="#" data-container="body" data-toggle="tooltip" data-placement="right" title="Ernährt sich vorwiegend von Rosskastanien">Rossameise</a>

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless

The following user(s) said Thank You: mcovents, boshra.m

Please Log in to join the conversation.

Joffm
Away
LimeSurvey Community Team

More

3 years 5 months ago #226694 by Joffm

Replied by Joffm on topic Popup textbox

And of course you can style by css

And all HTML features to display the content of a popover

Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

mcovents
Topic Author
Offline
Senior Member

More

3 years 5 months ago #226703 by mcovents

Replied by mcovents on topic Popup textbox

Thank you for this interesting information. However I have an existing survey that uses this css code which seems to work in Limesurvey 2.05
Since it's a rather big survey which uses this popup textbox extensively, I would prefer to get this code working in Limesurvey 3.28, if possible.
Do you think this can be done?
Thanks for you advice!
Marc.

Please Log in to join the conversation.

Joffm
Away
LimeSurvey Community Team

More

3 years 5 months ago #226704 by Joffm

Replied by Joffm on topic Popup textbox

Then I do not see an issue if
you change the class ".tooltip" to something else, like ".tooltip1"

And your second question:
If you have a look at the source code of your linked survey you see the line

Code:

<link rel="stylesheet" type="text/css" href="[url=https://tpsurvey.ugent.be/limesurvey328/tmp/assets/df693669/css/custom.css]/limesurvey328/tmp/assets/df693669/css/custom.css[/url]" />

Open and you see your code.

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

mcovents
Topic Author
Offline
Senior Member

More

3 years 5 months ago #226705 by mcovents

Replied by mcovents on topic Popup textbox

Yes, changing the name of the class works. Thank you!!!

Please Log in to join the conversation.

boshra.m
Offline
Premium Member

More

3 years 4 months ago #227066 by boshra.m

Replied by boshra.m on topic Popup textbox

Hi,

For an array question, what would the code for this type of pop up be for adding it to the subquestion?

Thank you!

Please Log in to join the conversation.

Joffm
Away
LimeSurvey Community Team

More

3 years 4 months ago #227072 by Joffm

Replied by Joffm on topic Popup textbox

Hi,
what do you mean by "pop up"?
A tooltip, a popover or a modal.
Please see here
[url] getbootstrap.com/docs/3.4/javascript/ [/url]

To get a simple tooltip it is the same code from the post above

Code:

<a href="#" data-container="body" data-toggle="tooltip" data-placement="top" title="The explanation text">The subquestion text</a>

and this script

Code:

<script>
$('[data-bs-toggle="popover"]').popover();
</script>

Joffm

See the demos in "getbootstrap" to find out about further options.

Volunteers are not paid.
Not because they are worthless, but because they are priceless

The following user(s) said Thank You: boshra.m

Please Log in to join the conversation.

Joffm
Away
LimeSurvey Community Team

More

3 years 4 months ago - 3 years 4 months ago #227073 by Joffm

Replied by Joffm on topic Popup textbox

Volunteers are not paid.
Not because they are worthless, but because they are priceless

Last edit: 3 years 4 months ago by Joffm.

The following user(s) said Thank You: boshra.m

Please Log in to join the conversation.

boshra.m
Offline
Premium Member

More

3 years 4 months ago #227112 by boshra.m

Replied by boshra.m on topic Popup textbox

Hi Joffm,

Thank you for your help on many occasions.

Unfortunately, I'm not sure why it is not working for me. The tooltip worked fine when I entered it into the question text but disappears when I add it into a sub question. Do I need to add the plugin itself or activate something?

I might be missing a crucial step. I have entered:
$('#example').tooltip(options)

into my theme and custom.css to see if that would do anything but unfortunately it has not.

Please Log in to join the conversation.

Joffm
Away
LimeSurvey Community Team

More

3 years 4 months ago #227115 by Joffm

Replied by Joffm on topic Popup textbox

Attach the lss export

Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

boshra.m
Offline
Premium Member

More

3 years 4 months ago #227116 by boshra.m

Replied by boshra.m on topic Popup textbox

oh wow I realized my mistake - it was such a blunder I am not even going to describe it haha... In conclusion, everything you said earlier worked 100%.

My apologies.

Please Log in to join the conversation.