Tooltip is displaying on right corner of screen

2 posts, 0 answers
  1. Afaque
    Afaque avatar
    1 posts
    Member since:
    Aug 2015

    Posted 26 Aug 2015 Link to this post

    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>

  2. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 27 Aug 2015 Link to this post

    Hi,

    I have inspected the scenario described but could not observe the unusual behavior. I am attaching my test project. Please review it and let me know what else should be added in order to replicate the issue.

    Regards,
    Plamen
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top