make the icon hover effect stay when hovered on div as well
Hi All,
Please quick help needed. please find below JS file, css and also the html file. My question is i have to keep the icon in tooltips css active when hovered over the div created dynamically in jquery.
I tried the following in the js (obj.adClass() and objremoveClass) file but its not working. it always activates the first icon which was hovered when i mouse over other icon div's. I mean its only happening for the first icon which was hovered over. When i navigate to other icon i am able to display the div but the highlight of icon is happening on first hover icon.
html
<span class="tooltipcss icoCircleHlp" data-contentstring="contentstring" data-islearnmore="T"></span>
<span class="tooltipcss icoCircleHlp" data-contentstring="contentstring2" data-islearnmore="f"></span>
JS File
$(document).ready(function () {
$(".tooltipcss").ktooltip({ url: URL});
});
(function ($) {
$.fn.extend({
ktooltip: function (options) {
var defaults = {
interval: 3000,
url: "Home/GetLocaleString"
};
var options = $.extend(defaults, options);
var getTipText = function (ctStringId, ctIsLearnMore) {
var tiptext = '', o = options;
$.ajax({
type: "GET",
url: o.url, // "/Home/GetLocaleString",
data: { DivString: ctStringId, LearnMore: ctIsLearnMore },
async: false,
success: function (result) {
tiptext = result;
},
error: function () {
tiptext = "An error occurred while retrieving help.";
}
});
return tiptext;
};
return this.each(function () {
var o = options, obj = $(this), cstring = obj.data('contentstring'), lmore = obj.data('islearnmore');
obj.mouseover(function () {
var tiptext = obj.data('tiptext');
if (!tiptext) {
tiptext = getTipText(cstring, lmore);
obj.data('tiptext', tiptext);
}
var ktooltip = $('#ktooltip');
if (!ktooltip.is('div')) {
var span = document.createElement('span'), ktooltip = document.createElement('div');
$(span).appendTo(ktooltip);
$(ktooltip).appendTo(document.body)
.attr('id', 'ktooltip')
.attr('class', 'arrow_box')
.mouseover(function () {
$(this).css('visibility', 'visible');
$(this).show();
//obj.addClass('icoCircleHlphover');
})
.mouseout(function () {
$(this).css('visibility', 'hidden');
//obj.removeClass('icoCircleHlphover');
})
.html(tiptext)
.css('left', obj.position().left - 3)
.css('top', obj.position().top + 25)
.css('visibility', 'visible')
.show();
} else {
ktooltip.html(tiptext)
.css('left', obj.position().left - 3)
.css('top', obj.position().top + 25)
.css('visibility', 'visible')
.show();
}
});
obj.mouseleave(function () {
var ktooltip = $('#ktooltip');
if (ktooltip.is('div')) { ktooltip.css('visibility', 'hidden'); }
});
});
obj.removeClass('icoCircleHlphover');
} // tooltip
});
})(jQuery);
CSS File
.icoCircleHlp
{
background-position: -77px -95px;
background-image: url('../Images/VLSC_Assets.png');
margin: 0;
padding: 0;
display: inline-block !important;
background-repeat: no-repeat;
overflow: hidden;
zoom: 1;
width: 21px;
height: 21px;
}
.icoCircleHlp:hover {
cursor:pointer;
background-position: -99px -190px;
}
.icoCircleHlphover {
background-position: -99px -190px;
background-image: url('../Images/VLSC_Assets.png');
margin: 0;
padding: 0;
display: inline-block !important;
background-repeat: no-repeat;
overflow: hidden;
zoom: 1;
width: 21px;
height: 21px;
}
.arrow_box {
position: absolute;
background: white;
border: 1px solid deepskyblue;
left:100px;
text-wrap: normal;
max-height: 400px;
max-width: 200px;
color: black;
padding: 10px 3px 10px 7px;
z-index:3000;
font-family: Segoe UI, Verdana, Tahoma, sans-serif;
font-size:11px;
}
.arrow_box {
position: absolute;
border: 1px solid deepskyblue;
left:100px;
text-wrap: normal;
max-height: 400px;
max-width: 200px;
color: black;
padding: 10px 3px 10px 7px;
z-index:3000;
font-family: Segoe UI, Verdana, Tahoma, sans-serif;
font-size:11px;
background: white; border: 1px solid #f55f4e; }
.arrow_box:after, .arrow_box:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.arrow_box:after { border-color: rgba(213, 212, 202, 0); border-bottom-color: white; border-width: 5px; left: 18%; margin-left: -30px; }
.arrow_box:before { border-color: rgba(245, 95, 78, 0); border-bottom-color: #f55f4e; border-width: 6px; left: 18%; margin-left: -31px; }
/*.arrow_box:after, .arrow_box:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.arrow_box:after { border-color: deepskyblue; border-bottom-color: white; border-top-color:white; border-width: 2px; left: 20%; margin-left: -30px; }
.arrow_box:before { border-color: deepskyblue; border-bottom-color: deepskyblue; border-width: 5px; left: 20%; margin-left: -36px; }*/
.LearnMore {
display: inline-block;
position: relative;
top: 10px;
font-family: Segoe UI, Verdana, Tahoma, sans-serif;
font-size:11px;
font-weight:bold;
color: deepskyblue;
text-decoration:none;
padding-bottom:5px;
}