HTML - DOM 元素 title 属性

HTML DOM 元素 **title** 属性允许我们访问和更新存储在元素 title 属性中的值。title 属性允许元素在鼠标悬停在元素上时以工具提示的形式显示其他信息。

语法

设置 title 属性值

element.title = New_title;

获取 title 属性值

element.title;

属性值

值	描述
New_title	您要为 title 属性设置的新值。

返回值

title 属性返回一个字符串，其中包含元素 title 属性的值。如果未定义该属性，则返回空字符串。

HTML DOM 元素“title”属性示例

以下是一些示例，演示了“title”属性的使用，这些属性会创建在将鼠标悬停在元素上时出现的工具提示。

普通文本上的工具提示

此示例演示如何使用 title 属性在将鼠标悬停在<p>元素内的文本上时显示工具提示。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style> 
        .tooltip {
            position: relative; 
            border-bottom: 1px dotted black;  
        }
        .tooltip .tooltiptext {
            visibility: hidden; 
            background-color: black;
            color: #fff; 
            padding: 5px 0;
            transition: opacity 0.3s;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>title Property</h2> 
    <p>
        Hover over the text below to see a tooltip:
    </p>
    
    <div class="tooltip">Hover over me too
        <span class="tooltiptext">
            This is an enhanced tooltip message
        </span>
    </div>
</body>

</html>

锚元素上的工具提示

此示例演示如何使用 title 属性在将鼠标悬停在链接（<a>）元素上时显示工具提示。<a>元素上的 title 属性提供了其他信息，这些信息在将鼠标悬停在链接上时会显示为工具提示。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Link Tooltip Example</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>title Property</h2>  
    <p>
        Hover over the link to see a tooltip:
    </p>

    <a href="#" title="Click here to learn more">
        Learn More
    </a>
</body>

</html>

支持的浏览器

属性
title	是	是	是	是	是

html_dom_element_reference.htm

打印页面