Mouseover function

More
4 months 3 weeks ago #161091 by lob
lob created the topic: Mouseover function
Is it possible to implement a mouseover function that displays a hint to a specific subquestion if your mouse points directly on it?

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

More
4 months 3 weeks ago #161159 by Joffm
Joffm replied the topic: Mouseover function
Hi, lob, that was asked a few days ago here:
https://www.limesurvey.org/forum/can-i-do-this-with-limesurvey/112965-providing-more-information-for-a-question
You can use the bootstrap tooltip functionality.

Regards
Joffm

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

More
4 months 2 weeks ago #161197 by lob
lob replied the topic: Mouseover function
Thank you for your advice. This looks nice. Is there a way to get this function without make the term look like a link? And does this hint pop up on tablets and smartphones too?

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

More
4 months 2 weeks ago #161203 by holch
holch replied the topic: Mouseover function
I guess for it to work it needs to be a link. But with the help of CSS you can style a link the way you want. And somehow you need to highlight the section anyway, to show that there might something behind this.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

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

More
1 month 6 days ago #165427 by ddrmoscow
ddrmoscow replied the topic: Mouseover function
Hi all,
In case topic is still relevant or someone is looking for these functions, here's small workaround:

Depending of LS version, one could easily use Jquery UI tools already included in LS with a bit of js in text source.

f.i. to apply "mouseover" - quess it's a simple Tooltip just use
<span data-toggle="tooltip" title="your message on moseover">your text</span>
in any desired place displayed (question / answer option / subquestion e.t.c.)

By default "tooltips" are not activated in LS, so it's required to add js code to appropriate text source to activate it
<script type="text/javascript" charset="utf-8">	
	$(document).ready(function() {
		$('[data-toggle="tooltip"]').tooltip();
    });	
</script>

Depending on the template used (in case default tooltip styling is missing), some additional styling code like
<style type="text/css">
.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
}</style>
might be helpfull


for additional capabilities check Jquery UI examples and manuals
same way you could try other tools from Jquery UI


As for LS 3+, it includes Bootstrap, so a lot of boostrap features could be implemented too, almost the same way


an example survey with tooltip for LS 2.6.6 attached (default template used)
Attachments:

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

More
3 weeks 2 days ago #166415 by tpartner
tpartner replied the topic: Mouseover function
As Joffm suggests, in LS 3.x, you can use Bootstrap tooltips without any JS.

Something like this:
<span data-toggle="tooltip" data-placement="top" data-html="true" title="Some <strong><em>tip</em></strong> text...">Hover here for tip.</span>

Will render this:


More about the tooltips here - getbootstrap.com/docs/4.0/components/tooltips/

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:

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

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!