Customization: Showing Tooltips for Shapes and Connectors

Tooltips are an important feature for displaying additional information besides what may be easily displayed within a shape of fixed size. The DSL Tools diagramming surface provides a mechanism showing tooltips for shapes and connectors (like those shown in the following image).

First, you've probably already noticed using .NET Reflector, IntelliSense, or Class Designer, that the Shape and Connector classes each eventual derive from the same base class, ShapeElement. ShapeElement is really the root of all evil ;) in the diagramming surface - everything on a diagram derives from it, and it implements some of the core functionality shared by all shapes. Why am I telling you this? So, that now you know, and knowing is half the battle...

No, really: it's because the tooltip functionality is exposed at that level and supported by any classes derived from it. Also, because everything derives from ShapeElement, many times when I just say (or write) shape I really mean that it applies to both node shapes and connectors. Only if I specifically say GeometryShape or node shape or Connector, does it mean that it applies to only those types.

Turning tooltips on is straight-forward. Each shape for which you want this enabled will need to override the HasTooltip property and return true. Then, by default, a tooltip will show when you hover over a shape, and it displays either the name of the associated domain model element or the shape's Id as a GUID. If you don't like the default text shown, you can also change the tooltip text as well.

The following code uses the Class Diagram template in DSL Tools as its starting point. It then turns on the default tooltip text for the ClassShape, and a tooltip with custom text for the Bi-directional association connector by overriding GetTooltipText. The custom tooltip text just simply shows which 2 shapes are connected by the connect when you hover over it -- nifty, huh?

 namespace CompanyName.ProjectName.Language31.Designer
{
   #region Using directives

    using System;
   using System.Collections.Generic;
   using Microsoft.VisualStudio.Modeling;
  using System.Diagnostics;
   using Microsoft.VisualStudio.Modeling.Utilities;
    using System.Drawing;
   using Microsoft.VisualStudio.Modeling.Diagrams;

 #endregion

  /// 
   /// ClassShape in the Class Diagram template.
   /// 
  public partial class ClassShape
 {
       /// 
       /// Turns on tooltip for this shape.
        /// 
      public override bool HasToolTip
     {
           get
         {
               return true;
            }
       }
   }

   /// 
   /// Bi-directional Association connector.
   /// 
  public partial class BidirectionalLink : Connector
  {
       /// 
       /// Turns on the tooltip for this connector.
        /// 
      public override bool HasToolTip
     {
           get
         {
               return true;
            }
       }

       /// 
       /// Changes the tooltip text for this connector to display which items
      /// it connects together.
       /// 
      /// Diagram item the tooltip is over.
        /// Tooltip text.
        public override string GetToolTipText(DiagramItem item)
     {
           NamedElement element = this.FromShape.ModelElement as NamedElement;
         string fromName = (element != null) ? element.Name : "Shape1";
          element = this.ToShape.ModelElement as NamedElement;
            string toName = (element != null) ? element.Name : "Shape2";

            return string.Format("Connects {0} to {1}", fromName, toName);
      }
   }
}

And, I ran across a bug while doing this - our tooltips for compartment list items aren't working correctly. If tooltips are turned on, they will only show the GUID for the compartment, but they really should show the name of the item that the user is hovering over. I've entered a bug about this behavior, so that we can address it in a later CTP.