Hi,
I am using kendo Tooltip to display on images on my page. but every time I hover over on image, tooltip appears on right corner of my screen.
Please help me to fix this annoying issue.
I have attached screenshot and files.
<div class="demo-section">
<ul id="products" class="dairy-photos">
<li><a href="#" data-id="11">
<img src="@Url.Content("~/images/11.jpg")" /></a>
</li>
</ul>
</div>
@(Html.Kendo().Tooltip()
.For("#products")
.Filter("li a")
.LoadContentFrom("DetailsNew", "TooltipNew")
.Position(TooltipPosition.Top)
.Width(220)
.Height(280)
.Events(events => events.RequestStart("requestStart"))
)
<script type="text/javascript">
function requestStart(e) {
e.options.data = {
id: e.target.data("id")
}
}
</script>
<style>
.demo-section
{
height: 460px;
}
.dairy-photos
{
float: left;
list-style-type: none;
margin: 60px 0 0 60px;
padding: 0;
width: 430px;
line-height: 0;
}
.dairy-photos li
{
display: inline-block;
margin: 0;
padding: 0;
width: 110px;
height: 110px;
position: relative;
}
.dairy-photos li:hover
{
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.8);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.8);
box-shadow: 0 0 10px rgba(0,0,0,0.8);
z-index: 1;
}
.dairy-photos li, .dairy-photos li:hover
{
transition: all .2s;
-moz-transition: all .2s;
-webkit-transition: all .2s;
}
.dairy-photos a
{
display: inline-block;
}
.dairy-description
{
float: right;
width: 250px;
margin: 80px 60px 0 0;
}
.dairy-description h2
{
font-size: 2.7em;
font-weight: normal;
}
.dairy-description p
{
line-height: 2em;
}
.dairy-details
{
padding: 10px 0 0 0;
}
.dairy-details h3
{
font-weight: normal;
font-size: 1.5em;
margin-top: 10px;
}
</style>