如何更改數據工具提示消息

Question

有沒有一種方法可以通過使用javascript來控制數據工具提示消息？像HTML DOM？

/* Add this attribute to the element that needs a tooltip */ 
 

 
[data-tooltip] { 
 
    position: relative; 
 
    z-index: 2; 
 
    cursor: pointer; 
 
} 
 
/* Hide the tooltip content by default */ 
 

 
[data-tooltip]:before, 
 
[data-tooltip]:after { 
 
    visibility: hidden; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); 
 
    opacity: 0; 
 
    pointer-events: none; 
 
} 
 
/* Position tooltip above the element */ 
 

 
[data-tooltip]:before { 
 
    position: absolute; 
 
    bottom: 150%; 
 
    left: 50%; 
 
    margin-bottom: 5px; 
 
    margin-left: -80px; 
 
    padding: 7px; 
 
    width: 160px; 
 
    border-radius: 2px; 
 
    border: 1px outset #C0C0C0; 
 
    box-shadow: 3px 2px 5px #9F9F9F; 
 
    background-color: #000; 
 
    background-color: hsla(206, 73%, 34%, 0.9); 
 
    color: #FFFFFF; 
 
    content: attr(data-tooltip); 
 
    text-align: center; 
 
    font-size: 11px; 
 
    font-family: "Trebuchet MS", Helvetica, sans-serif; 
 
    font-weight: bold; 
 
    line-height: 1.2; 
 
} 
 
/* Triangle hack to make tooltip look like a speech bubble */ 
 

 
[data-tooltip]:after { 
 
    position: absolute; 
 
    bottom: 150%; 
 
    left: 50%; 
 
    margin-left: -5px; 
 
    width: 0; 
 
    border-top: 5px solid #000; 
 
    border-top: 5px solid hsla(206, 73%, 34%, 0.9); 
 
    border-right: 5px solid transparent; 
 
    border-left: 5px solid transparent; 
 
    content: " "; 
 
    font-size: 0; 
 
    line-height: 0; 
 
} 
 
/* Show tooltip content on hover */ 
 

 
[data-tooltip]:hover:before, 
 
[data-tooltip]:hover:after { 
 
    visibility: visible; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); 
 
    opacity: 1; 
 
}

<a href="#" id="abc" data-tooltip="abc"><img src="http://www.w3schools.com/images/w3schools_green.jpg"/ ></a>

Answer 1

當然可以。使用（content: attr(data-tooltip)）從屬性data-tooltip獲取的屬性文本。

所以，你只需要改變屬性的值爲任何你想要的。

function changeTooltip() { 
 
    document.getElementById('abc').setAttribute('data-tooltip', 'aaa'); 
 
}

/* Add this attribute to the element that needs a tooltip */ 
 

 
[data-tooltip] { 
 
    position: relative; 
 
    z-index: 2; 
 
    cursor: pointer; 
 
} 
 
/* Hide the tooltip content by default */ 
 

 
[data-tooltip]:before, 
 
[data-tooltip]:after { 
 
    visibility: hidden; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); 
 
    opacity: 0; 
 
    pointer-events: none; 
 
} 
 
/* Position tooltip above the element */ 
 

 
[data-tooltip]:before { 
 
    position: absolute; 
 
    bottom: 150%; 
 
    left: 50%; 
 
    margin-bottom: 5px; 
 
    margin-left: -80px; 
 
    padding: 7px; 
 
    width: 160px; 
 
    border-radius: 2px; 
 
    border: 1px outset #C0C0C0; 
 
    box-shadow: 3px 2px 5px #9F9F9F; 
 
    background-color: #000; 
 
    background-color: hsla(206, 73%, 34%, 0.9); 
 
    color: #FFFFFF; 
 
    content: attr(data-tooltip); 
 
    text-align: center; 
 
    font-size: 11px; 
 
    font-family: "Trebuchet MS", Helvetica, sans-serif; 
 
    font-weight: bold; 
 
    line-height: 1.2; 
 
} 
 
/* Triangle hack to make tooltip look like a speech bubble */ 
 

 
[data-tooltip]:after { 
 
    position: absolute; 
 
    bottom: 150%; 
 
    left: 50%; 
 
    margin-left: -5px; 
 
    width: 0; 
 
    border-top: 5px solid #000; 
 
    border-top: 5px solid hsla(206, 73%, 34%, 0.9); 
 
    border-right: 5px solid transparent; 
 
    border-left: 5px solid transparent; 
 
    content: " "; 
 
    font-size: 0; 
 
    line-height: 0; 
 
} 
 
/* Show tooltip content on hover */ 
 

 
[data-tooltip]:hover:before, 
 
[data-tooltip]:hover:after { 
 
    visibility: visible; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); 
 
    opacity: 1; 
 
}

<a href="#" id="abc" data-tooltip="abc"><img src="http://www.w3schools.com/images/w3schools_green.jpg"/ ></a> 
 
<br /> 
 
<button onclick="changeTooltip()">Change tooltip to "aaa"</button>

Answer 2

如https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes解釋數據屬性可以通過dataset對象來訪問，使用屬性名稱部分data-之後。

在您的例子：

var tlink = document.getElementById('abc'); 
 
    
 
tlink.dataset.tooltip = "def";

/* Add this attribute to the element that needs a tooltip */ 
 

 
[data-tooltip] { 
 
    position: relative; 
 
    z-index: 2; 
 
    cursor: pointer; 
 
} 
 
/* Hide the tooltip content by default */ 
 

 
[data-tooltip]:before, 
 
[data-tooltip]:after { 
 
    visibility: hidden; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); 
 
    opacity: 0; 
 
    pointer-events: none; 
 
} 
 
/* Position tooltip above the element */ 
 

 
[data-tooltip]:before { 
 
    position: absolute; 
 
    bottom: 150%; 
 
    left: 50%; 
 
    margin-bottom: 5px; 
 
    margin-left: -80px; 
 
    padding: 7px; 
 
    width: 160px; 
 
    border-radius: 2px; 
 
    border: 1px outset #C0C0C0; 
 
    box-shadow: 3px 2px 5px #9F9F9F; 
 
    background-color: #000; 
 
    background-color: hsla(206, 73%, 34%, 0.9); 
 
    color: #FFFFFF; 
 
    content: attr(data-tooltip); 
 
    text-align: center; 
 
    font-size: 11px; 
 
    font-family: "Trebuchet MS", Helvetica, sans-serif; 
 
    font-weight: bold; 
 
    line-height: 1.2; 
 
} 
 
/* Triangle hack to make tooltip look like a speech bubble */ 
 

 
[data-tooltip]:after { 
 
    position: absolute; 
 
    bottom: 150%; 
 
    left: 50%; 
 
    margin-left: -5px; 
 
    width: 0; 
 
    border-top: 5px solid #000; 
 
    border-top: 5px solid hsla(206, 73%, 34%, 0.9); 
 
    border-right: 5px solid transparent; 
 
    border-left: 5px solid transparent; 
 
    content: " "; 
 
    font-size: 0; 
 
    line-height: 0; 
 
} 
 
/* Show tooltip content on hover */ 
 

 
[data-tooltip]:hover:before, 
 
[data-tooltip]:hover:after { 
 
    visibility: visible; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); 
 
    opacity: 1; 
 
}

<a href="#" id="abc" data-tooltip="abc"><img src="http://www.w3schools.com/images/w3schools_green.jpg"/ ></a>

Answer 3

var anchor = document.getElementById('abc'); 

anchor.onmouseover = function(){ 
    this.setAttribute('data-tooltip', 'hello sir'); 
}; 

小提琴 https://jsfiddle.net/omarCreativeDev/6rpxLu4p/