字符串中的工具提示 - Svelte

Question

是否可以将工具提示传递到 Svelte 中的某个变量的字符串中？我知道 svelte 有 {@html expression}，它适用于 strong、h1 等基础知识......但是有什么方法可以将一些 class 和工具提示传递到字符串的文本中。

这是一个例子：

<script>

let description = 'some text where I need to pass the tooltip. Is it possible?';
    
</script>

{description}

Answer 1

如评论所述，您的问题有点含糊 - 但我猜您想通过变量定义工具提示？那么你可以这样做 REPL

<script>
    import Comp from './Comp.svelte'

    let htmlStringWithTooltip = `
    <style>
    [data-tooltip] {
        position: relative;
    }
    [data-tooltip]:hover::before {
        content: attr(data-tooltip);
        position: absolute;
        left: 50%;
        transform: translate(-50%, -100%);
    }
    </style>
    <span data-tooltip='The tooltip'>Hello</span>
    `
</script>

<Comp {htmlStringWithTooltip} />

<style>

    :global(body) {
        padding-top: 3rem;  
    }

</style>

Comp.svelte

<script>

    export let htmlStringWithTooltip = ""

</script>

{@html htmlStringWithTooltip}

字符串中的工具提示 - Svelte

Tooltip in string - Svelte

html

string

class

tooltip

svelte

Comp.svelte