How to add "Help" tips to certain words or selections?

More
4 years 3 months ago #90756 by ChengF
ChengF created the topic: How to add "Help" tips to certain words or selections?
I would like to add further description for certain words or subquestions. The descriptions should show as a little call out box when the mouse hovers on the word and it should disappear once the mouse is moved away. I used the JavaScript command onmouseover and onmouseout. But it didn't work correctly. I am wondering if anyone knows how to do that in LS, or if there is no easy way, what kind of JavaScript Code would make it work?

Thank you in advance!

Please Log in to join the conversation.

More
4 years 3 months ago #90759 by helper
helper replied the topic: How to add "Help" tips to certain words or selections?
Just a thought, but have you tried an inline link with an alt and a title:

example:
This is a <a href="#" alt="Survey help goes here" title="Survey help goes here">survey</a>
The following user(s) said Thank You: ChengF

Please Log in to join the conversation.

More
4 years 3 months ago - 4 years 3 months ago #90790 by DenisChenu
DenisChenu replied the topic: How to add "Help" tips to certain words or selections?
helper trick can do the job, but think we can use an image with title too.
<img src="{TEMPLATEURL}/myhelp.png" alt="Help text here" />

And after use some tooltip jquery sytem.

Denis
(no link, no click ;) )

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
Last Edit: 4 years 3 months ago by DenisChenu. Reason: " lost

Please Log in to join the conversation.

More
4 years 3 months ago - 4 years 3 months ago #90814 by tpartner
tpartner replied the topic: How to add "Help" tips to certain words or selections?
To avoid the click, you can also use a <span> element with a title:
<span class="tip" title="Some tip text goes here">This is a tooltip span</span>

And then maybe style the tips a bit in template.css:
span.tip {
	color: #0000FF;
	cursor: help;
}

Then as Denis points out, you can use the qTip plugin shipped with LS:

1) Add this to startpage.pstpl right after {TEMPLATEJS}:
<script src="/scripts/jquery/jquery.qtip.js" type="text/javascript">
2) Add something like this to the end of template.js:
$(document).ready(function() {
	$('span.tip').qtip({
		position: {
			corner: {
			target: 'topMiddle',
			tooltip: 'bottomLeft'
			}
		}
	});
});

More info on the plugin here - craigsworks.com/projects/qtip/


Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last Edit: 4 years 3 months ago by tpartner.
The following user(s) said Thank You: blacknail, ChengF

Please Log in to join the conversation.

More
4 years 3 months ago #90815 by tpartner
tpartner replied the topic: How to add "Help" tips to certain words or selections?
Oops, small mistake on the qTip part - add this to startpage.pstpl right after {TEMPLATEJS}:
<script src="/scripts/jquery/jquery.qtip.js" type="text/javascript"></script>

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: blacknail, ChengF

Please Log in to join the conversation.

More
2 years 10 months ago #109428 by jayray27
jayray27 replied the topic: How to add "Help" tips to certain words or selections?
Hi,

how do I use qTip with Limesurvey 1.92?

Where do I need to put <script src="/scripts/jquery/jquery.qtip.js" type="text/javascript"></script> ??

Thank you!!!
Ben

Please Log in to join the conversation.

More
2 years 10 months ago #109669 by blacknail
blacknail replied the topic: How to add "Help" tips to certain words or selections?
jayray27, don't know if you still need, but you have to put ir in the Template Editor ( http://manual.limesurvey.org/The_template_editor#The_LimeSurvey_Template_Editor ), just like tpartner detailed in his two posts.

BUT, if you only need a simple tooltip (like myself), you don't have to use qTip, you can use a <span> element directly in your HTML, e.g.
<span title="My tip">text</span>

See for yourself: http://jsfiddle.net/a6Nba/ (please place the mouse cursor above the text).
The following user(s) said Thank You: jayray27

Please Log in to join the conversation.

More
2 years 10 months ago #109681 by jayray27
jayray27 replied the topic: How to add "Help" tips to certain words or selections?
Thank you!!

Please Log in to join the conversation.

More
2 years 10 months ago #109686 by Ben_V
Ben_V replied the topic: How to add "Help" tips to certain words or selections?

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.