CSS and ToolTip (background)

2 posts, 0 answers
  1. Naografix
    Naografix avatar
    13 posts
    Member since:
    Jan 2015

    Posted 12 Jan 2015 Link to this post

    Hey !

    I have a little problem with my CSS and my ToolTipSetting :

    http://puu.sh/epSZn/cbbd6a007d.png

    How can I put my background on my ToolTip ? Without white.

    this is my CSS :
    .rightCol {
        font-size: 14px;
        font-family: "Segoe UI",Segoe,"Roboto","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
        text-align: left;
        line-height: 19px;
        background-image: linear-gradient(white, black);
    }

    and my ToolTip :
    string template = @"
          <div class=""rightCol"">
          <div class=""NameStation"">{1}</div>
          <div class=""CodeSandre"">{2}</div><br/>
          <div class=""MaitreOuvrage"">{3}</div><br/>
          <div class=""Capacite"">{4}</div>
    </div>";


    Thx !
  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 14 Jan 2015 Link to this post

    Hello,

    The following example might help you to change  the layout of the tooltip:
    <style type="text/css">
        /* Change the wrapper's layout */
        div.k-tooltip.RadMap {
            background-image: linear-gradient(white, black);
            border:none;
        }
            /* Change the callout's layout */
            div.k-tooltip.RadMap .k-callout {
                border-top-color: black;
            }
     
        .rightCol {
            font-size: 14px;
            font-family: "Segoe UI",Segoe,"Roboto","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
            text-align: left;
            line-height: 19px;
            background-image: linear-gradient(white, black);
        }
    </style>
     
    <telerik:RadMap runat="server">
        <MarkersCollection>
            <telerik:MapMarker Shape="pinTarget">
                <TooltipSettings AutoHide="false" Content="<div class='rightCol'><div class='NameStation'>some sample text</div><div class='CodeSandre'>some sample text</div><br/><div class='MaitreOuvrage'>some sample text</div><br/><div class='Capacite'>some sample text</div></div>">
                </TooltipSettings>
            </telerik:MapMarker>
        </MarkersCollection>
    </telerik:RadMap>


    Regards,
    Ianko
    Telerik
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top