Make writing a habit together! This is the fifth day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

Said in the previous

🎈 usually uses the title attribute to create a tooltip for text, but the effect is not very good. Can we make a tooltip? Let’s take a look at ✍️

The effect

Jyeontu.xyz /jvuewheel/#…

Effect of implementation

HTML part

As shown in the figure below, a brief paragraph is wrapped with p tag, and the content in the SPAN tag is the content that requires us to set the suspension prompt.

<p>
    I am
    <span class="j-tooltip">
        title
    </span>
    .
</p>
Copy the code

The CSS part

Underline the text

Here we use border-bottom to implement: border-bottom: 1px dotted black;

Hover prompt frame

Use before to set the pop-up content, content is the prompt text, initial setting opacity to 0, and add a transition effect

opacity: 0;
transition: opacity 0.6 s;
Copy the code

Use the visibility property to set elements to hide

visibility:hidden;

Hover displays a prompt box

.j-tooltip:hover:before {
    opacity: 1;
    visibility: visible;
}
Copy the code

Full CSS code

.j-tooltip {
    position: relative;
    border-bottom: 1px dotted black;
}
.j-tooltip:before {
    content: "title";
    position: absolute;
    width: 100px;
    background-color: #062b45;
    color: white;
    text-align: center;
    padding: 10px;
    line-height: 1.2;
    border-radius: 6px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.6 s;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    font-size: 0.75 em;
    visibility: hidden;
    word-break: break-all;
}

.j-tooltip:hover:before {
    opacity: 1;
    visibility: visible;
}
Copy the code

The effect

This prompt pops up when you hover the mouse over the title.

Component packaging

Now that we know how to implement the effect, it is more convenient to encapsulate it as a component for future reuse. Let’s encapsulate it as a VUE component.

Parameter configuration

To make a component more usable, we need to make its parameters configurable.

  • tipText

TipText can set the text in the prompt box

  • textStyle

Set text styles that require a hover prompt, such as underlining text.

  • toolTipStyle

Set the style of the prompt box, such as: width, font color, background color…

props: {
    tipText: {
        type: String.default: "Tooltip Content"
    },
    textStyle: {
        type: Object.default: () = > {
            return {
                "border-bottom": "1px dotted black"}; }},toolTipStyle: {
        type: Object.default: () = > {
            return {
                backgroundColor: "#062b45".color: "#fff".width: "100px"}; }}},Copy the code

HTML part

Use :style to define CSS variables that you can later fetch in the CSS.

<span
    :style="{ '--backgroundColor': toolTipStyle.backgroundColor, '--color': toolTipStyle.color, '--width': toolTipStyle.width }"
>
    <span
        :id="uid"
        class="j-tooltip"
        :data-tooltip="tipText"
        :style="getTextStyle()"
        ><slot></slot>
    </span>
</span>
Copy the code

The CSS part

  • Gets the declared CSS variable

<style vars="{ backgroundColor, color, width }" lang="scss" scoped>

  • Using CSS variables
width: var(--width);
background-color: var(--backgroundColor);
color: var(--color);
Copy the code
  • The complete code
<style vars="{ backgroundColor, color.width }" lang="scss" scoped>
.j-tooltip {
    position: relative;
    border-bottom: 1px dotted black;
}

.j-tooltip:before {
    content: attr(data-tooltip);
    position: absolute;
    width: var(--width);
    background-color: var(--backgroundColor);
    color: var(--color);
    text-align: center;
    padding: 10px;
    line-height: 1.2;
    border-radius: 6px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.6 s;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    font-size: 0.75 em;
    visibility: hidden;
    word-break: break-all;
}

.j-tooltip:hover:before{
    opacity: 1;
    visibility: visible;
}
</style>
Copy the code

Component calls

Once packaged as a component, you can easily call it, setting the parameters each time without having to write CSS style code repeatedly.

HTML

<p>
    hover
    <j-tool-tip
        tipText="one"
        :textStyle="textStyle"
        :toolTipStyle="toolTipStyle"
        >here
    </j-tool-tip>
    to see one.
</p>
<p>
    hover
    <j-tool-tip tipText="another">here </j-tool-tip>
    to see another.
</p>
Copy the code

JavaScript

textStyle: {
    borderBottom: "1px dotted skyblue".fontSize: "large".color: "skyblue"
},
toolTipStyle: {
    backgroundColor: "grey".color: "skyblue".width: "100px"
},
Copy the code

The source address

Component library: Jyeontu.xyz/jvueWheel

Gitee:gitee.com/zheng_yongt…

Personal blog: Jyeontu. xyz/JYeontuBlog

Past wonderful

In order to learn mo from Yu, I actually developed such a plug-in

Programmer romance – lovers daily small program

JavaScript bidirectional linked list implementation LRU cache algorithm

JavaScript bidirectional linked list implementation LFU cache algorithm

JavaScript implements prefix trees

Vue simple implementation of the word cloud component

Vue + ECharts realizes drilling linkage of map provinces in China

Said in the back

🎉 this is JYeontu, now a front-end engineer, who can brush algorithm problems in spare time. Usually, he likes playing badminton 🏸 and writing some things. He records 📋 for himself, but also hopes that he can help us a little. Thank you for your support, and we’ll see you at 🙌.