VUE V-Tooltip线路休息

发布于 2025-02-07 02:16:01 字数 460 浏览 0 评论 0原文

我正在使用 v-tooltip 。我想将一些工具提示文本添加到一个按钮中，我想划线，但是我无法弄清楚是否有可能使用此方法折断。我查看了该文档，看不到任何地方引用的文档。

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

理想的工具提示：

This is one line
This is another line

但是文本出现在一行上。也许使用\ n不是其他建议吗？谢谢。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不必你懂 2025-02-14 02:16:01

您可以将对象用作指令的值，其中包含br标签的内容属性，以破坏行，html：true作为第二属性：

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

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

回复收藏 0 原文

春庭雪 2025-02-14 02:16:01

使用＆lt;/br＆gt; \ n的INTEAD。

演示：

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>

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>

回复收藏 0 原文

~没有更多了~