If you see the attached images you'll notice that the slider on the right with the square drag handle has a working tooltip, but the slider on the left doesn't have a tooltip when dragged as you can see in the second image.
I compared the two MVVM based implementations, stripped out the unnecessary information and came up with this:
As you can see they're almost identical apart from class names which are used only to style the drag handles differently.
The JavaScript that activates the tooltip and binds the MVVM objects looks like this:
Any idea why the left slider tooltip won't show up?
I compared the two MVVM based implementations, stripped out the unnecessary information and came up with this:
<
input
id
=
"..."
name
=
"..."
class
=
"post-retirement"
data-show-buttons
=
"false"
data-role
=
"slider"
data-min
=
"0"
data-max
=
"2"
data-small-step
=
"0.01"
value
=
""
data-value
=
""
data-bind
=
"visible: isVisible, events: { change: onChange }"
data-index
=
"@i"
data-tooltip
=
"{format: '{0:p0}'}"
data-toggle
=
"tooltip"
/>
<
input
id
=
"..."
name
=
"..."
class
=
"weight-split"
data-show-buttons
=
"false"
data-role
=
"slider"
data-min
=
"0"
data-max
=
"1"
data-small-step
=
"0.01"
value
=
""
data-value
=
""
data-bind
=
"visible: isVisible, events: { change: onChange }"
data-index
=
"@i"
data-tooltip
=
"{format: '{0:p0}'}"
data-toggle
=
"tooltip"
/>
As you can see they're almost identical apart from class names which are used only to style the drag handles differently.
The JavaScript that activates the tooltip and binds the MVVM objects looks like this:
//activate tooltips
$(
"[data-toggle=\"tooltip\"]"
).tooltip();
var
postRetirementViewModel = kendo.observable({
isEnabled:
true
,
isVisible:
true
,
onChange:
function
(e)
{
//get the index for this row
var
index = $(e.sender.element).data(
"index"
);
//removed for brevity
}
});
var
weightSplitViewModel = kendo.observable({
isEnabled:
true
,
isVisible:
true
,
onChange:
function
(e)
{
//removed for brevity
}
});
kendo.bind($(
".post-retirement"
), postRetirementViewModel);
kendo.bind($(
".weight-split"
), weightSplitViewModel);
Any idea why the left slider tooltip won't show up?