In Quick View page while we editing item for personalization, tooltip don’t show we can use this solution to show tooltip using events in entrypoint of JavaScript.
JavaScript:
events: {
'change [data-toggle="text-option"]': 'textOption',
'mouseover [data-toggle="text-option"]': 'showToolTip',
'mouseout [data-toggle="text-option"]': 'hideToolTip'
},
showToolTip: function (e) {
//this event is used to show the tool tip in the edit cart page in pdp//
var currentID = e.currentTarget.id.split('in-modal-')[1];
var itemOptions = SC.CONFIGURATION.productConfigurator.optionsConfiguration;
var currentOption = _.filter(itemOptions, function (option)
{
if (option.configuratorLabelsCartOptionId == currentID)
{
return option.tooltip;
}
})
if (currentOption.length > 0) {
var tooltip = currentOption[0].tooltip;
if (tooltip != '') {
let tooltipContent = '<div class="tooltip fade bottom in" role="tooltip"><div class="tooltip-arrow" style="left: 50%;"></div><div class="tooltip-inner" >' + tooltip + '</div></div>';
$(tooltipContent).insertAfter("#" + e.currentTarget.id);
}
}
},
hideToolTip: function(e){
//this event is used to hide the tool tip in the edit cart page when a mouse is not hovered in pdp quickview page//
if (e.currentTarget.nextSibling)
{
e.currentTarget.nextSibling.remove();
}
},
//this event is used to get the validation message in the quickview edit cart pdp page//
textOption: function (e) {
var currentID = e.currentTarget.name;
var itemOptions = SC.CONFIGURATION.productConfigurator.optionsConfiguration;
var currentOption = _.filter(itemOptions, function (option)
{
if (option.configuratorLabelsCartOptionId == currentID)
{
return option.pattern;
}
})
var pattern = currentOption[0].pattern;
pattern = new RegExp(pattern)
if (!(pattern.test(e.currentTarget.value)))
{
if (e.currentTarget.nextSibling == null)
{
var global_view_message = '<span class="global-views-message global-views-message-error alert">' +
currentOption[0].validation + '</span>'
$(global_view_message).insertAfter("#" + e.currentTarget.id);
}
} else {
if (e.currentTarget.nextSibling)
{
e.currentTarget.nextSibling.remove();
}
}
},