#

# Example: Customize a Chart's Tooltip

This example shows how to customize the default tooltip of a `Chart`.

### This example shows how to customize the tooltip for a `Chart`.

A `Chart` instance comes with a simple default tooltip. This tooltip is represented by the `tooltip` attribute. Through the tooltip attribute you can do the following:

- Style the tooltip background, border and text.
- Customize and format the tooltip message.
- Change the show and hide events.
- Disable the tooltip.

The `tooltip` attribute contains the following properties:

node
  Reference to the actual dom node
showEvent
  Event that should trigger the tooltip
hideEvent
  Event that should trigger the removal of a tooltip (can be an event or an array of events)
styles
  A hash of style properties that will be applied to the tooltip node
show
  Indicates whether or not to show the tooltip
markerEventHandler
  Displays and hides tooltip based on marker events
planarEventHandler
  Displays and hides tooltip based on planar events
markerLabelFunction
  Reference to the function used to format a marker event triggered tooltip's text. The method contains the following arguments:
  categoryItem
    An object containing the following:
    axis
      The axis to which the category is bound.
    displayName
      The display name set to the category (defaults to key if not provided).
    key
      The key of the category.
    value
      The value of the category.
  valueItem
    An object containing the following:
    axis
      The axis to which the item's series is bound.
    displayName
      The display name of the series. (defaults to key if not provided)
    key
      The key for the series.
    value
      The value for the series item.
  itemIndex
    The index of the item within the series.
  series
    The `CartesianSeries` instance of the item.
  seriesIndex
    The index of the series in the `seriesCollection`.
  The method returns an `HTMLElement` which is written into the DOM using `appendChild`. If you override this method and choose to return an html string, you will also need to override the tooltip's `setTextFunction` method to accept an html string.
planarLabelFunction
  Reference to the function used to format a planar event triggered tooltip's text
  categoryAxis
    `CategoryAxis` Reference to the categoryAxis of the chart.
  valueItems
    Array of objects for each series that has a data point in the coordinate plane of the event. Each object contains the following data:
    axis
      The value axis of the series.
    key
      The key for the series.
    value
      The value for the series item.
    displayName
      The display name of the series. (defaults to key if not provided)
  index
    The index of the item within its series.
  seriesArray
    Array of series instances for each value item.
  seriesIndex
    The index of the series in the `seriesCollection`.
  The method returns an `HTMLElement` which is written into the DOM using `appendChild`. If you override this method and choose to return an html string, you will also need to override the tooltip's `setTextFunction` method to accept an html string.
setTextFunction
  Method that writes content returned from `planarLabelFunction` or `markerLabelFunction` into the the tooltip node. has the following signature:
  label
    The `HTMLElement` that the content is to be added.
  val
    The content to be rendered into tooltip. This can be a `String` or `HTMLElement`. If an HTML string is used, it will be rendered as a string.

In this example, we have changed the styles and set a custom `markerLabelFunction` to format the text.

#### CSS

    #mychart {
        margin:10px 10px 10px 10px;
        width:90%;
        max-width: 800px;
        height:400px;
    }

#### HTML

    <div id="mychart"></div>

#### JavaScript

    var myDataValues = [
        {category:"5/1/2010", Miscellaneous:2000, Expenses:3700, Revenue:2200},
        {category:"5/2/2010", Miscellaneous:50, Expenses:9100, Revenue:100},
        {category:"5/3/2010", Miscellaneous:400, Expenses:1100, Revenue:1500},
        {category:"5/4/2010", Miscellaneous:200, Expenses:1900, Revenue:2800},
        {category:"5/5/2010", Miscellaneous:5000, Expenses:5000, Revenue:2650}
    ];

    var myTooltip = {
        styles: {
            backgroundColor: "#333",
            color: "#eee",
            borderColor: "#fff",
            textAlign: "center"
        },
        markerLabelFunction: function(categoryItem, valueItem, itemIndex, series, seriesIndex)
        {
            var msg = document.createElement("div"),
                underlinedTextBlock = document.createElement("span"),
                boldTextBlock = document.createElement("div");
            underlinedTextBlock.style.textDecoration = "underline";
            boldTextBlock.style.marginTop = "5px";
            boldTextBlock.style.fontWeight = "bold";
            underlinedTextBlock.appendChild(document.createTextNode(valueItem.displayName + " for " +
                                            categoryItem.axis.get("labelFunction").apply(this, [categoryItem.value, categoryItem.axis.get("labelFormat")])));
            boldTextBlock.appendChild(document.createTextNode(valueItem.axis.get("labelFunction").apply(this, [valueItem.value, {prefix:"$", decimalPlaces:2}])));
            msg.appendChild(underlinedTextBlock);
            msg.appendChild(document.createElement("br"));
            msg.appendChild(boldTextBlock);
            return msg;
        }
    };

    var mychart = new Y.Chart({
                        dataProvider:myDataValues,
                        type:"bar",
                        render:"#mychart",
                        tooltip: myTooltip
                    });