I am trying to implement custom tooltip (because character restriction in default tooltip).
But when i added code in datalabel, tooltip height is not adjust with data inside it, it is working perfectly in codepen.
Anyone having idea what will restrict in k2 form for it?
<ul>
<li>
<img src="https://xyz.com/Runtime/Image.ashx?ImID=376" height="12px" width="12px"/>
<div>
<a href="#">Who is your target consumer? <br/>
What demand moment are you targeting?<br/>
What customer need/opportunity are we solving for?<br/>
</a>
</div>
</li>
</ul>
<style>
h1{
text-align:center;
background:#1d1d1d;
color:#fff;
margin:0;
padding:10px;
font-family:arial;
font-weight:200;
}
ul{
position:relative;
cursor:default;
}
li{
/*list-style:none;*/
padding:10px;
color:#fff;
font-family:arial;
/*background:#1884BC;*/
border-radius:5px;
width:200px;
margin:15px;
display:inline-block;
}
ul li div{
background:#D0CFCF;
color:#fff;
padding:7px;
border-radius:5px;
position:absolute;
min-width:50px;
max-width:300px;
min-height: 20px;
mix-height: 200px;
display:none;
}
ul div:before{
content:'';
height:3px;
width:0;
border:7px solid transparent;
border-bottom-color:#1d1d1d;
position:absolute;
top:-16px;
left:14px;
}
div a{
color:#000000;
text-decoration:none;
}
</style>
<script>
$( document ).ready(function() {
$('ul li').mouseenter(function(){
var pos = $(this).position();
$(this).find('div').css('top', (pos.top)+50 + 'px').fadeIn();
}).mouseleave(function(){
$(this).find('div').fadeOut();
});
});
</script>
