Welcome, Guest
Username: Password: Remember me

TOPIC: Is there a template with a CSS popup for the question-mark explanation text?

Is there a template with a CSS popup for the question-mark explanation text? 2 years 1 month ago #85181

  • blanka
  • blanka's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 8
  • Thank you received: 1
  • Karma: 0
I was puzzling to give the survey a cleaner look. I was wondering if it is possible to move the explanation of a question to a CSS popup instead of showing it below the question? Is there a template that does this?
The administrator has disabled public write access.

Re: Is there a template with a CSS popup for the question-mark explanation text? 2 years 1 month ago #85203

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6451
  • Thank you received: 844
  • Karma: 249
Hello,

Not included in default template. But you can do something with this kind of HTML/CSS:
question.pstpl:
<div {QUESTION_ESSENTIALS} class="question-wrapper {QUESTION_CLASS}{QUESTION_MAN_CLASS}{QUESTION_INPUT_ERROR_CLASS}">
	<div class="question-text">
		<span class="asterisk">{QUESTION_MANDATORY}</span><span class="qnumcode">{QUESTION_NUMBER} {QUESTION_CODE} </span>{QUESTION_TEXT}
	</div>
        <div class="showhelp">Show the help
	<div class="question-help">
		{QUESTIONHELP}
	</div>
        </div>
	<div class="help-wrapper">
		<div class="mandatory error">{QUESTION_MAN_MESSAGE}</div>
		{QUESTION_VALID_MESSAGE}
		<div class="tip">{QUESTION_HELP}</div>
	</div>
	<div class="answers-wrapper">
		{ANSWER}
	</div>
</div>
(adapted from citronade)
.showhelp{position:relative;}
.question-help{position:absolute;top:0;left:-99999em;with:20em;}
.showhelp:hover .question-help{position:absolute;top:1em;left:0}

It's a quick not tested solution, and you need some js for IE6/7. But you can do what you want with some HTML/CSS skills.

Denis
Last Edit: 2 years 1 month ago by DenisChenu.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.097 seconds
Donation Image