Mouseover function

More
9 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
9 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


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

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

More
9 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
9 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
6 months 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
5 months 3 weeks 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!