tooltip transparency

4 posts, 0 answers
  1. M L
    M L avatar
    16 posts
    Member since:
    May 2010

    Posted 06 May 2013 Link to this post

    Hello,
    Is there any way to set the transparency/opacity value for tooltips displayed on the map?
    Applying custom style like shown here: http://www.telerik.com/help/wpf/radmap-features-information-layer-shape-reder.html#ToolTipStyle
    works only for non transparent colours. Alpha channels applied to those colors from the example are simply ignored. I'd like to have a transparent background for tooltips.
    Templates dont help either, since they're inside the tooltip anyway.

    SqlGeospatialDataReader reader = new SqlGeospatialDataReader();
    reader.GeospatialPropertyName = "Geom";
    reader.Source = myTestSource;
    reader.ToolTipFormat = "{Name} - {Count}";
    reader.ToolTipStyle = getStyle("CustomToolTip"); //getStyle gets this style:
     
    <Style TargetType="ToolTip" x:Key="customToolTipStyle">
        <Setter Property="BorderBrush" Value="Orange" />
        <Setter Property="Opacity"  Value="25" />
        <Setter Property="Background" Value="#7F000000" />
        <Setter Property="Foreground" Value="White" />
    </Style>

    Colors work, excpt nothing is transparent. Neither Opacity nor Alpha for background works.
  2. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 09 May 2013 Link to this post

    Hi,

    I believe that the problem is that you have set an incorrect value for the Opacity property of the tooltip. It should be a floating point number, between 0.0 and 1.0. Setting the Value of the Setter to 0.25 should fix this.
     
    Regards,
    Petar Kirov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. M L
    M L avatar
    16 posts
    Member since:
    May 2010

    Posted 09 May 2013 Link to this post

    Yes and no.
    You're right about the opacity, that was my mistake, however its still not exactly what I'd like to achieve.
    Opacity affects everything right now, including the tooltip's foreground (font's) colour.
    But I would like to have only the background transparent, leaving the border and text intact.
    I can remove the opacity setter completly and use this:
    <Setter Property="Background" Value="#7F000000" />
    I thought this should normally make the background half transparent black, instead it makes it non transparent gray.
    Making the value 00000000 gives a completly white, but not transparent background. If I use FFFFFFFF, i get white non transparent background as well.
    Which leads me to believe that the background is actually transparent, however there is some other white element drawn beneath, some kind of tooltip container perhaps? This blends the colors if i use transparency for background, but doesnt allow for actual tranparency.
    Since im setting nothing else except the style (not using datatemplates for example) I think that whatever sits under, is part of Telerik control's rathar than something on our end.
  5. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 13 May 2013 Link to this post

    Hi,

    In order to get transparent background you should set the Template property in the Style you use to customize the appearance of tooltip as it is described in the following MSDN article:
    http://msdn.microsoft.com/en-us/library/dd334410(v=vs.95).aspx
    The sample code of the template for tooltip is below.
    <Style TargetType="ToolTip" x:Key="customToolTipStyle">
        <Setter Property="Background" Value="#7F000000" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="BorderBrush" Value="Orange" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToolTip">
                    <Border BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
                        <ContentPresenter Content="{TemplateBinding Content}"
                                  ContentTemplate="{TemplateBinding ContentTemplate}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    All the best,
    Andrey Murzov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top