How to capitalize title tooltip in Vue.js-CodePudding

How do I capitalize only the first letter of the title tooltip (from a span)? I tried using CSS text-transform: capitalize;, but it didn't work.

<template lang="pug">
    .cell-audience-status-dot(:)
        .cell-content.audiences(v-if="data !== 'never_activated'")
            .icon-wrapper(:)
                span.icon(:title="data" :) &#9679;
</template>

<script>
import { get } from 'vuex-pathify'

export default {
    name: 'cellStatus',
    props: ['data', 'type', 'fullData'],
    computed: {
        openedSegments: get('activeSegments/openedSegments'),
        activeMenu: get('menu/activeMenu'),
        getStatusColor() {
            const { data } = this
            if (data === 'active') return 'green'
            else if (data === 'inactive') return 'red'
            else if (data === 'paused') return 'orange'
            return ''
        }
    },
}
</script>

CodePudding user response：

Create a computed property that returns the capitalized form of data:

export default {
  computed: {
    title() {
      return this.data?.length && this.data[0].toUpperCase()   this.data.slice(1)
    }
  }
}

And instead of data, bind the computed prop to the span's title attribute:

span.icon(:title="title" :) &#9679;