Welcome to the LimeSurvey Community Forum

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

Popup textbox

  • mcovents
  • mcovents's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
2 years 3 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
  • Joffm's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 3 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
  • Joffm's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 3 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
  • mcovents's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
2 years 3 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
  • Joffm's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 3 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
  • mcovents's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
2 years 3 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.

More
2 years 3 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
  • Joffm's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 3 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
  • Joffm's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 3 months ago - 2 years 3 months ago #227073 by Joffm
Replied by Joffm on topic Popup textbox
<script>
$('[data-bs-toggle="tooltip"]').tooltip();
</script>
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 2 years 3 months ago by Joffm.
The following user(s) said Thank You: boshra.m

Please Log in to join the conversation.

More
2 years 3 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
  • Joffm's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 3 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.

More
2 years 3 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.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source