Vue v-tooltip line break

Question

I am using v-tooltip. I want to add some tooltip text to a button and I want a line break, but I cannot figure out if it's possible to have a line break with this method. I looked at the documentation and can't see this being referenced anywhere.

<button v-tooltip="`This is one line \n This is another line`">

Ideal ouput for tooltip:

This is one line
This is another line

However the text comes on one line. Maybe using \n is not the way, any other suggestions? Thanks.

score 4 · Accepted Answer · answered Jun 14 '22 at 10:32

4

You could use an object as value of the directive with content property that have br tag in the content to break the line and html:true as second property :

<button v-tooltip="{ content: 'This is one line <br/> This is another line', html: true }">

answered Jun 14 '22 at 10:32

Boussadjra Brahim

82,684
19
144
164

score 0 · Answer 2 · answered Jun 14 '22 at 10:44

Use </br> intead of \n.

Demo :

Vue.use(VTooltip);

new Vue({
  el: '#app',
  data: {
    showTooltip: false,
    message: "クリックでメッセージ"
  },
  computed: {
    messageObj() {
        return {
        content: this.message,
        trigger: 'manual',
        show: this.showTooltip
      }
    }
  },
  methods: {
    setTooltip(visibility) {
        this.showTooltip = visibility;
    }
  }
});

.tooltip {
  display: block !important;
  z-index: 10000;
}

.tooltip .tooltip-inner {
  background: black;
  color: white;
  border-radius: 16px;
  padding: 5px 10px 4px;
}

.tooltip .tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
  border-color: black;
  z-index: 1;
}


.tooltip.popover .popover-inner {
  background: #f9f9f9;
  color: black;
  padding: 24px;
  border-radius: 5px;
  box-shadow: 0 5px 30px rgba(black, .1);
}

.tooltip.popover .popover-arrow {
  border-color: #f9f9f9;
}

.tooltip[aria-hidden='true'] {
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s, visibility .15s;
}

.tooltip[aria-hidden='false'] {
  visibility: visible;
  opacity: 1;
  transition: opacity .15s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/v-tooltip"></script>
<div id="app">
  <button v-tooltip="`This is one line </br> This is another line`">Show Tooltip</button>
</div>

Vue v-tooltip line break

2 Answers2