Tooltip

Description

The tooltip template controls how information is displayed when users hover over interactive elements throughout the widgets. This template serves as a container for injecting other content templates.

Unlike most templates, the tooltip itself doesn't directly render data. Instead, it provides a structure with control classes that determine where and how the content appears.

Common places where tooltips appear include:

• Hovering over the Header Widget level badge
• Hovering over the Header Widget user's name
• Hovering over the points in the Profile and Header Widgets

Control classes

Each control class available in the tooltip template serves a specific purpose:

Class	Description	Required
mambo-ctrl-tooltip	Designates the element into which content templates will be injected	Yes
mambo-ctrl-arrow	Used to position the tooltip arrow element correctly	No

Implementation example

To customise the tooltip template, you'll need to:

1. Create your HTML template structure with the required control classes
2. Use the Mambo.updateTemplate() method to replace the default tooltip template

JavaScript

<script type="text/template" id="tooltip-template">
  <div>
      <div class="mambo-ctrl-tooltip"></div>
      <div class="mambo-ctrl-arrow">^</div>
  </div>
</script>
<script type="text/javascript">
  // Use the Mambo Callbacks array
  var mamboCallbacks = window.mamboCallbacks || [];
  mamboCallbacks.push(function() {
      // Override the default Tooltip template
      Mambo.updateTemplate( Mambo.Template.tooltip, Mambo('#tooltip-template').html() );
  });
</script>

Customisation options

You can customise the tooltip appearance by:

• Modifying the HTML structure (while maintaining required control classes)
• Adding CSS classes for styling
• Changing the arrow indicator character or using an image

---

Related topics

• Header widget
• Profile widget