Line breaks in Vue v-tooltip functionality

Question

Line breaks in Vue v-tooltip functionality

Currently, I am implementing v-tooltip to add tooltip text to a button. My aim is to include a line break within the tooltip text, but I have been unable to determine if this is feasible using this method. After reviewing the documentation, I did not find any mention of how to achieve a line break.

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

The desired output for the tooltip is:

This is one line
This is another line

However, the current result displays both lines on a single line. It appears that using \n may not be the correct approach. Are there any other suggestions or alternatives that could help me achieve the desired outcome? Thank you.

javascript vue.js v-tooltip

Answer 1

Answer №1

Utilize an object as the value of the directive, containing a content property with a br tag to break the line, and a second property of html:true:

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

Answer 2

Utilize an object as the value of the directive, containing a content property with a br tag to break the line, and a second property of html:true:

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

Answer 3

Answer №2

Replace </br> with \n.

Example :

Vue.use(VTooltip);

new Vue({
  el: '#app',
  data: {
    showTooltip: false,
    message: "Click to display 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 \n This is another line`">Show Tooltip</button>
</div>

Answer 4

Replace </br> with \n.

Example :

Vue.use(VTooltip);

new Vue({
  el: '#app',
  data: {
    showTooltip: false,
    message: "Click to display 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 \n This is another line`">Show Tooltip</button>
</div>

Line breaks in Vue v-tooltip functionality

Answer №1

Answer №2

Similar questions

Alter the website link in an HTML file as well as in the corresponding CSS and JavaScript

Generating a fresh document in MongoDB using Mongoose, complete with references and assigned ObjectIDs

What is the best way to transfer properties to a different component using the onClick event triggered by an element generated within the map function?

retrieving the value added to an array

Extract data from a website with Python and selenium

After triggering an action, I am eager to make a selection from the store

Mastering the art of iterating through arrays using node.js request()

Utilize the capabilities of the Dropbox Core API in Javascript to effortlessly transfer and store files on

What is the process for retrieving DOM elements and JavaScript variables using PHP?

Inject a DOM event into a personalized form validator within an Angular application

Replace the Vue loading spinner with either bars or dots in a Laravel Vue.js project

Interactive real-time search results with clickable option through AJAX technology

Is it possible for Vue js to display an image from the /dist/ directory even if it is not present?

What is the best way to transform a text file into an array of objects?

Are you trying to uncover the secrets of slot machines?

Saving the data of a variable to a text file

Struggling to Parse JSON Responses?

What's the best way to incorporate a clear options icon when choosing an option in a MaterialUI select component?

A step-by-step guide on masking (proxying) a WebSocket port

Ways to verify if the current date exists within a TypeScript date array