Làm cách nào để thêm một mẹo công cụ vào phần tử span?

Trong đoạn mã sau, tôi muốn một mẹo công cụ xuất hiện khi người dùng di chuyển nhịp, làm thế nào để tôi làm điều đó? Tôi không muốn sử dụng bất kỳ liên kết.

<span> text </span>

Đây là cách đơn giản, tích hợp sẵn:

<span title="My tip">text</span>

Điều đó cung cấp cho bạn các công cụ văn bản đơn giản. Nếu bạn muốn có các chú giải công cụ phong phú, với HTML được định dạng, chúng sẽ cần sử dụng một thư viện để làm điều đó. May mắn thay có rất nhiều trong số đó .

Chú giải công cụ tùy chỉnh với CSS thuần túy - không cần JavaScript:

Ví dụ ở đây (có mã) / Ví dụ toàn màn hình

Để thay thế cho mặc định titletooltips thuộc tính, bạn có thể làm CSS tùy chỉnh của riêng bạn tooltips sử dụng :before/ :after yếu tố giả và HTML5 data-*thuộc tính .

Sử dụng CSS được cung cấp, bạn có thể thêm một chú giải công cụ vào một phần tử bằng data-tooltipthuộc tính.

Bạn cũng có thể kiểm soát vị trí của chú giải công cụ tùy chỉnh bằng cách sử dụng data-tooltip-positionthuộc tính (giá trị được chấp nhận: top/ right/ bottom/ left).

Chẳng hạn, phần sau đây sẽ thêm một bảng công cụ được định vị ở dưới cùng của phần tử span.

<span data-tooltip="Custom tooltip text." data-tooltip-position="bottom">Custom bottom tooltip.</span>

Cái này hoạt động ra sao?

Bạn có thể hiển thị các chú giải công cụ tùy chỉnh với các phần tử giả bằng cách truy xuất các giá trị thuộc tính tùy chỉnh bằng cách sử dụng attr()hàm.

[data-tooltip]:before {
    content: attr(data-tooltip);
}

Về mặt định vị chú giải công cụ, chỉ cần sử dụng bộ chọn thuộc tính và thay đổi vị trí dựa trên giá trị của thuộc tính.

Ví dụ ở đây (có mã) / Ví dụ toàn màn hình

CSS đầy đủ được sử dụng trong ví dụ - tùy chỉnh điều này theo nhu cầu của bạn.

[data-tooltip] {
    display: inline-block;
    position: relative;
    cursor: help;
    padding: 4px;
}
/* Tooltip styling */
[data-tooltip]:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.4;
    min-width: 100px;
    text-align: center;
    border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
    bottom: 100%;
    margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
    left: 100%;
    margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
    top: 100%;
    margin-top: 6px;
}
[data-tooltip-position="left"]:before {
    right: 100%;
    margin-right: 6px;
}

/* Tooltip arrow styling/placement */
[data-tooltip]:after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
    left: 50%;
    margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
    top: 50%;
    margin-top: -6px;
}
[data-tooltip-position="top"]:after {
    bottom: 100%;
    border-width: 6px 6px 0;
    border-top-color: #000;
}
[data-tooltip-position="right"]:after {
    left: 100%;
    border-width: 6px 6px 6px 0;
    border-right-color: #000;
}
[data-tooltip-position="bottom"]:after {
    top: 100%;
    border-width: 0 6px 6px;
    border-bottom-color: #000;
}
[data-tooltip-position="left"]:after {
    right: 100%;
    border-width: 6px 0 6px 6px;
    border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    display: block;
    z-index: 50;
}

Trong hầu hết các trình duyệt, thuộc tính tiêu đề sẽ hiển thị dưới dạng một chú giải công cụ và thường linh hoạt về loại phần tử mà nó sẽ hoạt động.

<span title="This will show as a tooltip">Mouse over for a tooltip!</span>
<a href="http://www.stackoverflow.com" title="Link to stackoverflow.com">stackoverflow.com</a>
<img src="something.png" alt="Something" title="Something">

Tất cả những thứ đó sẽ kết xuất các chú giải công cụ trong hầu hết mọi trình duyệt.

Đối với tooltip cơ bản, bạn muốn:

<span title="This is my tooltip"> Hover on me to see tooltip! </span>

các "title"thuộc tính sẽ được sử dụng như văn bản cho tooltip bởi trình duyệt, nếu bạn muốn áp dụng phong cách để nó xem xét sử dụng một số plugin