Tooltip in EJ 1 ASP.NET MVC CircularGauge

17 Nov 2017 / 1 minute to read

  • Tooltip feature has been added to the Circular Gauge. Circular Gauge has several elements such as pointers, label, customLabel, scales, etc.
  • There is a need for Tooltip feature in the Circular Gauge control because whenever the text hides or overrides with other gauge elements, it may not be fully visible. For resolving those problems Tooltip feature has been implemented in the Circular Gauge control.

Default Tooltip

  • Tooltip has three attributes in it. The first two attributes such as ShowLabelTooltip and ShowCustomLabelTooltip are for enabling the Tooltip for label as well as custom label in default appearance.
  • ShowLabelTooltip is to enable the Tooltip for labels and ShowCustomLabelTooltip is for enabling the Tooltip option for customLabels.
  • cshtml
  • @(Html.EJ().CircularGauge(“circularGaugeTooltip”)
    
    //Defines the tooltip object.
    .Tooltip(tooltip=>tooltip
    
    // Enables the label tooltip.
    .ShowLabelTooltip(true)
    
    // Enables the custom label tooltip.
    .ShowCustomLabelTooltip(true))
    
    //Customizes the scale options.
    .Scales(SC =>{SC.Radius(130).ShowLabels(true)
    
    //Customizes the custom label options.
    .CustomLabels(cl => {cl.Value(“0 9 5 3 4 5”).Font(f =>f.Size("20px").FontFamily("Arial").FontStyle("bold")).Position(position => position.X(180).Y(200))
    .Add();})
    
    //Customizes the pointers options.
    .Pointers(PO =>{PO.Value(60).Length(90)
    .Add();})
    .Add();
    })
    )
  • c#
  • public partial class CircularGaugeController : Controller
    {
    	//// GET: /ToolTip/
    	public ActionResult Tooltip()
    	{
    		return View();
    	}
    }

    Execute the above code to render the following output.

    Tooltip_img1

    Gauge with Default ToolTip

    Tooltip Template

    In Tooltip option, you can customize the Tooltip window by adding the tooltip template on that page with the help of API TemplateID. Refer to the following code example to know more about Tooltip template.

  • cshtml
  • @(Html.EJ().CircularGauge(“circularGaugeTooltip”)
    //Defines the tooltip object.
    .Tooltip(tooltip=>tooltip
    
    // Enables the label tooltip.
    .ShowLabelTooltip(true)
    
    // Enables the custom label tooltip.
    .ShowCustomLabelTooltip(true)
    
    // Enables the tooltip template ID.
    .TemplateID(“Tooltip”))
    
    // Customizes the scale options.
    .Scales(SC =>{SC.Radius(130).ShowLabels(true)
    
    // Customizes the custom label options.
    .CustomLabels(cl => {cl.Value(“0 9 5 3 4 5”).Font(f =>f.Size("20px").FontFamily("Arial").FontStyle("bold")).Position(position => position.X(180).Y(200)).Add();})
    
    // Customizes the pointers options..pointers(PO =>{PO.Value(60).Length(90).Add();})
    .Add();
    })
    )
  • c#
  • public partial class CircularGaugeController : Controller
    {
    	// GET: /ToolTip/
    	public ActionResult Tooltip()
    	{
    		return View();
    	}
    }

    Execute the above code to render the following output.

    Tooltip_img2

    Circular gauge with tooltip template