Showing a span attribute value when hovering-CodePudding

I have an HTML like this:

<p id="IP08">Uneven development is, precisely that: capitalist
factors (firms, industries, countries) have a common trait, but
<span ref="capitalist factors (firms, industries, countries)">
they</span> show uneven unfolding and cannot be individually
predicted. Since the factors are mutually and interdependently
related, the general trend that we define as the law of uneven
development can be inferred from <span ref="capitalist factors
(firms, industries, countries)">their</span> relationship, which
has a specific connotation, i.e., the difference in the paces of
the factors that make up the relationship itself. Since the general
trend is determined by capitalism’s nature, <span ref="the general
trend">it</span> cannot change without changing the nature of
capitalism itself.</p>

How can I show the value of ref attribute of span tag when hovering on its text.

CodePudding user response：

you can use title attribute or you can make your own custom tooltip like this, in this case be aware of positioning your tooltip to prevent overflows, in html you can add your custom attributes as well starting with data- for example data-customAttribute the attribute selector in css looks like this [data-customAttribute] {.....} for more specificity you can add the element span[data-customAttribute] {.....}

/** Tootip **/
  span[ref]:hover:after {
    opacity: 1;
    transition: all 0.1s ease .5s;
    visibility: visible;
    animation: grow 3s forwards;
}

span[ref]:after {
    content: attr(ref);
    background-color: #00adb5;
    color: #fff;
    position: absolute;
    padding: 1px 5px 2px 5px;
    top: 100%;
    left: 0px;
    white-space: nowrap;
    opacity: 0;
    box-shadow: 3px 3px 5px #00ADB5;
    border: 1px solid rgb(197, 195, 195);
    border-radius: 0 5px 0 5px;
    visibility: hidden;
    z-index: 20;
}

span[ref] {
    position: relative;
}

/* you can ignore the animation its not mandatory */
@keyframes grow {
    0% {
        transform: scale(0);
    }

    30%, 65% {
        transform: scale(1);
    }

    70%, 100% {
        transform: scale(0);
    }
}

<p id="IP08">Uneven development is, precisely that: capitalist
factors (firms, industries, countries) have a common trait, but
<span ref="capitalist factors (firms, industries, countries)">
they</span> show uneven unfolding and cannot be individually
predicted. Since the factors are mutually and interdependently
related, the general trend that we define as the law of uneven
development can be inferred from <span ref="capitalist factors
(firms, industries, countries)">their</span> relationship, which
has a specific connotation, i.e., the difference in the paces of
the factors that make up the relationship itself. Since the general
trend is determined by capitalism’s nature, <span ref="the general
trend">it</span> cannot change without changing the nature of
capitalism itself.</p>