Estoy usando v-tooltip . Quiero agregar texto de información sobre herramientas a un botón y quiero un salto de línea, pero no puedo averiguar si es posible tener un salto de línea con este método. Miré la documentación y no puedo ver que se haga referencia a esto en ninguna parte.
<button v-tooltip="`This is one line \n This is another line`">Salida ideal para información sobre herramientas:
This is one line This is another line Sin embargo, el texto viene en una línea. Tal vez usar \n no sea el camino, ¿alguna otra sugerencia? Gracias.
Podría usar un objeto como valor de la directiva con la propiedad de contenido que tiene la etiqueta br en el contenido para dividir la línea y html:true como segunda propiedad:
<button v-tooltip="{ content: 'This is one line <br/> This is another line', html: true }">Utilice </br> en lugar de \n .
demostración :
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>