javascriptvue.jsv-tooltip

Vue v-tooltip line break

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.

Solution

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