Tooltip setup

[austintoddj]

I'm having an issue with getting tooltips to render, and I'm not understanding what props need to be where.

My chart currently looks like this:

<la-cartesian autoresize :bound="[0]" :height="260" :data="values">
    <la-area fill-color="#8AD2BD" prop="views" color="#03a87c" :width="5" dot curve></la-area>
    <la-x-axis :interval="8" prop="date"></la-x-axis>
    <la-y-axis :gridline-interval="5" :interval="5" :gridline="true"></la-y-axis>
    <la-tooltip>
        <div class="tooltip" slot-scope="props">
            <div class="title">{{ props.label }}</div>
                <ul class="list">
                    <li
                        :key="item.label"
                        v-for="item in props.actived"
                        :style="{ borderTop: '3px solid ' + item.color }">
                    <div class="label">{{ item.label }}</div>
                    <div class="value">{{ item.value }}</div>
                </li>
            </ul>
        </div>
    </la-tooltip>
</la-cartesian>

When I don't try to format the tooltips and simply rely on <la-tooltip /> the tooltips render just fine. I'm just having trouble wrapping my head around the usage of customizing these.