Vielen Dank für die schnellen Antworten, das mit dem Tooltip hat jetzt funktioniert! Die Beispieldateien waren genau meine Frage, da ich es gerne genau so wie im Beispiel gehabt hätte. Das geht ja aber leider nicht, wie Du festgestellt hast. Ich habe in der Zwischenzeit ein bisschen mit den Werten herumgespielt und habe eine für mich passende Lösung gefunden (s. Screenshot). Ich werde wahrscheinlich noch versuchen, den Text unter der Skala etwas größer zu bekommen sowie den Text links daneben höher zu setzen. Ich füge noch den genutzten Code mit an, falls andere Leser ebenfalls nach einer solchen Lösung suchen.
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
var ticksArray = [
[1, ''],
[2, ''],
[3, ''],
[4, ''],
[5, ''],
[6, ''],
[7, ''],
[8, ''],
[9, ''],
[10, ''],
[11, ''],
[12, ''],
[13, ''],
[14, ''],
[15, ''],
[16, ''],
[17, ''],
];
var ticksArray2 = [
[1, '<span style="color:blue">extrem wichtiger</span>'],
[2, ''],
[3, '<span style="color:blue">sehr viel wichtiger</span>'],
[4, ''],
[5, '<span style="color:blue">viel <br> wichtiger</span>'],
[6, ''],
[7, '<span style="color:blue">etwas <br> wichtiger</span>'],
[8, ''],
[9, '<span style="color:black">gleich <br> wichtig</span>'],
[10, ''],
[11, '<span style="color:red">etwas <br> wichtiger</span>'],
[12, ''],
[13, '<span style="color:red">viel <br> wichtiger</span>'],
[14, ''],
[15, '<span style="color:red">sehr viel wichtiger</span>'],
[16, ''],
[17, '<span style="color:red">extrem wichtiger</span>'],
];
insertSliderTicks('{QID}', ticksArray);
insertSliderTicks2('{QID}', ticksArray2);
});
/* Insert Slider Tick Marks */
function insertSliderTicks(qID, ticksArray) {
var thisQuestion = $('#question'+qID);
$(thisQuestion).addClass('with-inserted-ticks');
$('input:text', thisQuestion).on('slideEnabled',function(){
var thisSlider = $(this);
var thisItem = $(thisSlider).closest('li');
var thisMin = $('.slider-handle:eq(0)', thisItem).attr('aria-valuemin');
var thisMax = $('.slider-handle:eq(0)', thisItem).attr('aria-valuemax');
var thisRange = thisMax - thisMin;
$.each(ticksArray, function(i, val) {
var tickRelativePosition = val[0] - thisMin;
var tickPercent = (tickRelativePosition/thisRange)*100;
// Insert tick marks
$('.slider-handle:eq(0)', thisItem).before('<div class="inserted-tick left-'+tickPercent+'" style="left: '+tickPercent+'%">\
<div class="tick-text">'+val[1]+'</div>\
</div>');
});
});
}
/* Insert Slider Tick Marks */
function insertSliderTicks2(qID, ticksArray2) {
var thisQuestion = $('#question'+qID);
$(thisQuestion).addClass('with-inserted-ticks');
$('input:text', thisQuestion).on('slideEnabled',function(){
var thisSlider = $(this);
var thisItem = $(thisSlider).closest('li');
var thisMin = $('.slider-handle:eq(0)', thisItem).attr('aria-valuemin');
var thisMax = $('.slider-handle:eq(0)', thisItem).attr('aria-valuemax');
var thisRange = thisMax - thisMin;
$.each(ticksArray2, function(i, val) {
var tickRelativePosition = val[0] - thisMin;
var tickPercent = (tickRelativePosition/thisRange)*100;
// Insert tick marks
$('.slider-handle:eq(0)', thisItem).before('<div class="inserted-tick2 left-'+tickPercent+'" style="left: '+tickPercent+'%">\
<div class="tick-text">'+val[1]+'</div>\
</div>');
});
});
}
</script>
<style type="text/css">/* Slider Tick Marks */
@media only screen and (min-width: 768px) {
.with-inserted-ticks .slider-container {
padding-right: 30px;
padding-left: 30px;
}
}
.with-inserted-ticks .slider-item {
margin-bottom: 100px;
margin-top: 100px;
}
.with-inserted-ticks .slider-container .help-block {
margin: 25px 0 0 -20px;
width: 40px;
text-align: center;
}
.with-inserted-ticks .slider-container .help-block.pull-right {
margin: 25px -20px 0 0;
}
.inserted-tick, .inserted-tick2 {
position: absolute;
top: 50%;
height: 20px;
width: 4px;
margin-top: -25px;
margin-left: -1px;
background-color: #DDDDDD;
background-color: black;
}
.inserted-tick2.left-0,
.inserted-tick2.left-100,
.inserted-tick.left-0,
.inserted-tick.left-100 {
background-color: transparent;
background-color: black;
}
.inserted-tick2 .tick-text {
position: absolute;
top: -250%;
width: 100px;
margin-left: -50px;
color: #000000;
text-align: center;
}
.inserted-tick .tick-text {
position: absolute;
top: 150%;
width: 100px;
margin-left: -50px;
color: #000000;
text-align: center;
}
@media only screen and (max-width: 768px) {
.slider-list .slider-left, .slider-list .slider-right {
margin-top: 0em;
}
}
.inserted-tick.left-0 .tick-text {
margin-left: 0px;
text-align: left;
}
.inserted-tick.left-100 .tick-text {
margin-left: -100px;
text-align: right;
}
}
.slider .tooltip { display:none !important; }
.tooltip { display:none !important; }
.slider-selection { display:none !important; }
</style>
