Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:

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

How to add "Help" tips to certain words or selections? 1 Jahr 8 Monate her #90756

  • ChengF
  • ChengFs Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 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!
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: How to add "Help" tips to certain words or selections? 1 Jahr 8 Monate her #90759

  • helper
  • helpers Avatar
  • OFFLINE
  • Expert Lime
  • Beiträge: 126
  • Dank erhalten: 18
  • 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>
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Folgende Benutzer bedankten sich: ChengF

Re: How to add "Help" tips to certain words or selections? 1 Jahr 8 Monate her #90790

  • DenisChenu
  • DenisChenus Avatar
  • OFFLINE
  • Moderator Lime
  • Beiträge: 6334
  • Dank erhalten: 818
  • Karma: 243
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 ;) )
Letzte Änderung: 1 Jahr 8 Monate her von DenisChenu. Begründung: " lost
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: How to add "Help" tips to certain words or selections? 1 Jahr 8 Monate her #90814

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4195
  • Dank erhalten: 789
  • Karma: 359
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 Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Letzte Änderung: 1 Jahr 8 Monate her von tpartner.
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Folgende Benutzer bedankten sich: blacknail, ChengF

Re: How to add "Help" tips to certain words or selections? 1 Jahr 8 Monate her #90815

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4195
  • Dank erhalten: 789
  • Karma: 359
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Folgende Benutzer bedankten sich: blacknail, ChengF

How to add "Help" tips to certain words or selections? 3 Monate 3 Wochen her #109428

  • jayray27
  • jayray27s Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 6
  • Karma: 0
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
Der Administrator hat öffentliche Schreibrechte deaktiviert.

How to add "Help" tips to certain words or selections? 3 Monate 2 Wochen her #109669

  • blacknail
  • blacknails Avatar
  • OFFLINE
  • Junior Lime
  • Beiträge: 30
  • Dank erhalten: 1
  • Karma: 0
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).
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Folgende Benutzer bedankten sich: jayray27

How to add "Help" tips to certain words or selections? 3 Monate 2 Wochen her #109681

  • jayray27
  • jayray27s Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 6
  • Karma: 0
Thank you!!
Der Administrator hat öffentliche Schreibrechte deaktiviert.

How to add "Help" tips to certain words or selections? 3 Monate 2 Wochen her #109686

  • Ben_V
  • Ben_Vs Avatar
  • OFFLINE
  • Platinum Lime
  • Beiträge: 1083
  • Dank erhalten: 241
  • Karma: 77
Benoît

goo.gl/Bw5iM => Recherche GG dans le forum français (remplacer "exemple" dans la barre de recherche)
goo.gl/WX8PH => GG search for english forum (Replace "example" in the search bar)
goo.gl/IxiGu => Búsqueda en el foro en español (Cambiar "ejemplo" en la barra de...
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Moderatoren: ITEd
Ladezeit der Seite: 0.293 Sekunden
Donation Image