Vue v-tooltip line break-CodePudding

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.

CodePudding user response：

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 }">

CodePudding user response：

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>