The LimeSurvey Fund-Raiser 2012 is complete. Thank you for donating a total of 25,000 USD!     List of donors »

Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

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

How to add "Help" tips to certain words or selections? 4 months 2 weeks ago #90756

  • ChengF
  • ChengF's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 12
  • Karma: 0
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!
The administrator has disabled public write access.

Re: How to add "Help" tips to certain words or selections? 4 months 2 weeks ago #90759

  • helper
  • helper's Avatar
  • OFFLINE
  • Expert Lime
  • Posts: 126
  • Thank you received: 17
  • Karma: 0
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 administrator has disabled public write access.
The following user(s) said Thank You: ChengF

Re: How to add "Help" tips to certain words or selections? 4 months 2 weeks ago #90790

  • DenisChenu
  • DenisChenu's Avatar
  • NOW ONLINE
  • Moderator Lime
  • Posts: 4397
  • Thank you received: 454
  • Karma: 165
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 ;) )
Last Edit: 4 months 2 weeks ago by DenisChenu. Reason: " lost
The administrator has disabled public write access.

Re: How to add "Help" tips to certain words or selections? 4 months 1 week ago #90814

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 2858
  • Thank you received: 424
  • Karma: 244
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/

Capture_2013-01-08.JPG
Cheers,
Tony

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 4 months 1 week ago by tpartner.
The administrator has disabled public write access.
The following user(s) said Thank You: ChengF

Re: How to add "Help" tips to certain words or selections? 4 months 1 week ago #90815

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 2858
  • Thank you received: 424
  • Karma: 244
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

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.
The following user(s) said Thank You: ChengF
  • Page:
  • 1
Moderators: DenisChenu, ITEd
Time to create page: 0.361 seconds
Donation Image