How to v-for Bootstrap vue tooltips

Question

I have a few Bootstrap Vue Tooltips and i'd like to reduce the footprint in markup by having a v-for that look through an object array and fills the values of the <b-tooltip> properties.

one of my current tooltips

<b-tooltip v-if="clientInContext && taxId && hideTaxId"
  target="titlebar-taxId-eye-show"
  :disabled.sync="disableTaxIdButtonTooltip"
  :show.sync="showTaxIdButtonTooltip"
  triggers="hover"
  placement="bottom">
    Click to temporarily display this value
</b-tooltip>

My V-For attempt:

<b-tooltip v-for='tooltip in tooltipContents'
  v-if="tooltip.vif"
  target="tooltip.target"
  :disabled.sync="tooltip.disable"
  :show.sync="tooltip.show"
  triggers="hover"
  placement="bottom">
    {{tooltip.text}}
</b-tooltip>

public tooltipContents: object[] = [
  {
    vif: 'clientInContext && ssn && hideSsn',
    target: 'titlebar-ssn-eye-show',
    disable: this.disableSsnButtonTooltip,
    show: this.showSsnButtonTooltip,
    text: 'Click to temporarily display this value'
  },
  {
    vif: 'clientInContext && ssn && !hideSsn',
    target: 'titlebar-ssn-eye-hide',
    disable: this.disableSsnButtonTooltip,
    show: this.showSsnButtonTooltip,
    text: 'Click to mask this value'
  },
  {
    vif: 'clientInContext && ssn && !hideSsn',
    target: 'titlebar-ssn',
    disable: this.disableSsnTextTooltip,
    show: this.showSsnTextTooltip,
    text: '{{ssn}}' 
  }
]

I'm not sure what else I can do to get this to work. And haven't found anything online related to this issue.

Your vif property shouldn't be a string, but a statement, e.g. vif: clientInContext && ssn && !hideSsn (without the quotes), as you want it to be evaluated. The same for the text: '{{ssn}}' should simply be text: ssn — Terry
– Terry, Commented Apr 12, 2019 at 19:40
I changed it to be like you state but none of the tooltips appear :/ — Daniel Turcich
– Daniel Turcich, Commented Apr 12, 2019 at 19:49

Matt Oestreich · Accepted Answer · 2019-04-12 20:54:47Z

I would place the v-for in a div and put the v-if on the v-tooltip.. This isn't a "one-to-one" comparison with your example, but it shows how you can perform a check for each tooltip..

CodePen mirror: https://codepen.io/oze4/pen/gyxrBY?editors=1010

new Vue({
  el: "#app",
  data: {
    tooltips: [{
        name: "tooltip1",
        target: "button-1",
        placement: "bottom",
        text: "Live"
      },
      {
        name: "tooltip2",
        target: "button-2",
        placement: "top",
        text: "Html"
      },
      {
        name: "tooltip3",
        target: "button-3",
        placement: "left",
        text: "Alternative"
      }
    ]
  },
  methods: {
    tooltipCheck(tooltip) {
      switch (tooltip) {
        case "tooltip1":
          {
            // do check for tooltip 1
            return true;
          }
        case "tooltip2":
          {
            // do check fo tooltip2
            return false;
          }
        case "tooltip3":
          {
            // do check for tooltip3
            return true;
          }
      }
    }
  }
});

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />


<div id="app">
  <div style="margin-top: 40px;">
    <b-container fluid>
      <b-row style="margin-top: 10px;">
        <b-button id="button-1" variant="outline-success">One (check evaluates to true)</b-button>
      </b-row>
      <b-row style="margin-top: 10px;">
        <b-button id="button-2" variant="outline-success">Two (check evaluates to false)</b-button>
      </b-row>
      <b-row style="margin-top: 10px;">
        <b-button id="button-3" variant="outline-success">Three (check evaluates to true)</b-button>
      </b-row>
      <div v-for="(tt, index) in tooltips">
        <b-tooltip v-if="tooltipCheck(tt.name)" :target="tt.target" :placement="tt.placement">
          {{ tt.text }}
        </b-tooltip>
      </div>
    </b-container>
  </div>
</div>

Collectives™ on Stack Overflow

How to v-for Bootstrap vue tooltips

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related