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

列印頁面