显示所有“标题"一页上一次显示工具提示 [英] Show all "title" tooltips at once on one page

问题描述

我的页面具有不同的标题"属性.
我知道正确的行为是将鼠标悬停在元素上时显示"title"属性，但是我希望能够:

I have a page with different "title" attributes.
I know the proper behavior is to show the "title" attribute when you hover your mouse over the element, but i would like to be able to either:

• 当我将div之一悬停时，立即显示所有标题"工具提示.
• 在页面加载时立即显示所有标题"工具提示.

基本示例:

 <p title="Correct answer">Hello world</p>
 <p title="Wrong answer">Goodbye world</p>

我可以使用JS在页面上一次显示所有标题属性的任何方法吗?注意:我需要保留html标题属性，不能更改.

Is there any way i can use JS to show all title attributes at once on my page ? Note: I need to keep the html title attributes, can't change that.

推荐答案

更新后的答案

当您将鼠标悬停在任一答案段落上时，下面的代码会导致答案类型指示符显示在每个答案段落的旁边.它遵循以下步骤:

The code belows causes answer-type indicators to appear next to each answer paragraph when you hover over any one of those answer paragraphs. It follows these steps:

• 使用 document.querySelectorAll("[titles]")检索所有答案段落.
• 为每个答案段落创建一个相应的答案类型指示符div.该div会开始隐藏，并使用 position:absolute 进行定位，但是该绝对位置将相对于相应原始答案段落的位置.
• 为'mouseover'事件设置一个处理程序，通过向其添加适当的向我展示"类来使每个指标可见.
• 为'mouseout'事件设置另一个处理程序，通过从其中删除相同的向我展示"类来隐藏每个指标.

• Retrieve all answer paragraphs using document.querySelectorAll("[titles]").
• For each answer paragraph, create a corresponding answer-type indicator div. This div will start out hidden, and will be positioned using position: absolute, but that absolute position will be relative to the position of the corresponding original answer paragraph.
• Set up one handler, for the 'mouseover' event, to make each indicator visible by adding an appropriate "show me" class to it.
• Set up another handler, for the 'mouseout' event, to make each indicator hidden by removing that same "show me" class from it.

正如我在评论中所指出的，我非常小心不要调用这些指标工具提示.但是请注意，这些指示器会在悬停开始后立即显示，但仅在特定的答案后的一秒钟内就会显示原始的默认工具提示 ，不必要地复制了您的某些显示信息.您可以根据需要禁用此默认工具提示，但这将需要一些额外的工作.

I am being careful not to call these indicators tooltips, as I have noted in the comments. Note, however, that these indicators appear immediately after the hovering starts, but the original default tooltip for just that particular answer also appears, just a moment or two later, duplicating some of your display info unnecessarily. You can disable this default tooltip if you want to, but that would take some extra work.

我以指示符的形式包含了 z-index:-1; ，因为在缺少它的情况下可能会出现问题.您可以通过将鼠标悬停在答案上来显示指标.但是，如果该指示符出现时，它涵盖了光标所在的答案，那么从技术上讲，鼠标不再位于答案上方，并且您立即触发'mouseout'事件.或者，如果您本来是将鼠标原本悬停在答案段落上但离指示器出现位置稍远的位置上，则指示器仍会按预期出现.但是，您只需将鼠标移动几毫米即可将鼠标悬停在指示器上，从而有效地将鼠标移出答案，从而再次导致指示器过早消失. z-index:-1; 可以防止这种情况，因为这将确保答案段落也位于顶部".但是，这样做的缺点是，答案文本可能会部分隐藏指示符文本，具体取决于您相对于答案文本放置指示符的方式.

I included z-index: -1; in the style of the indicators because of a problem that can occur in its absence. You make the indicators appear by mousing over an answer. However, if, when that indicator appears, it covers the answer where your cursor is located, then the mouse is technically no longer over the answer and you immediately fire the 'mouseout' event. Alternatively, if you happen to originally mouse-over a position that is on the answer paragraph but a little away from where the indicator appears, the indicator will still appear as expected. However, you only have to move your mouse a few millimeters to mouse-over the indicator, effectively mousing-out of the answer, again causing the indicator to disappear prematurely. The z-index: -1; prevents this, as it will ensure that the answer paragraph is also "on top". However, one down side to this is that the indicator text may be partially hidden by the answer text, depending on how you position the indicator relative to the answer text.

// the positioning of each indicator relative its corresponding answer text
var indicOffsetTop = 10;
var indicOffsetLeft = 5;

// retrieve all the answer paragraphs from the DOM
var answers = document.querySelectorAll("[title]");

// build but don't yet show the answer-type indicators

// loop over each answer paragraph
[].forEach.call(answers, function(answer) {
  
  // create a new div element that will contain the answer-type text
  var indic = document.createElement("div");
  
  // style this div so it stands out and also so that it starts out hidden
  indic.classList.add("answerTypeIndicator");
  
  // get the position of the original answer paragraph so that
  // the new answer-type indicator can be positioned near it
  var posn = answer.getBoundingClientRect();
  
  // slightly offset the position of the answer-type indicator relative to
  // its corresponding answer text so that both can be seen simultaneously
  indic.style.top = posn.top + indicOffsetTop + "px";
  indic.style.left = posn.left + indicOffsetLeft + "px";
  
  // take the value (i.e. the text) from the title attribute of the answer paragraph
  // and put it into the content of the answer-type indicator
  indic.innerHTML = answer.getAttribute("title");
  
  // place the new indicator into the DOM, but note that it is still hidden at this point
  document.body.appendChild(indic);
});

// put all the newly created answer-type indicator divs into a variable for later access
var indics = document.querySelectorAll(".answerTypeIndicator");

// determine what code to call when starting and stopping hovering over an answer
// do this by adding hover listeners to each "answer" paragraph
[].forEach.call(answers, function(answer) {
  answer.addEventListener("mouseover", showTitleInfo);
  answer.addEventListener("mouseout",  hideTitleInfo);
});

// do this when starting to hover over an answer
function showTitleInfo() {
  
  // loop through each answer-style indicator div
  [].forEach.call(indics, function(indic) {
    
    // make each indicator visible
    indic.classList.add("showing");
  });
}

// do this when stopping hovering over an answer
function hideTitleInfo() {
  
  // loop through each answer-style indicator div
  [].forEach.call(indics, function(indic) {
    
    // hide each indicator
    indic.classList.remove("showing");
  });
}

.answerTypeIndicator {
  position: absolute;
  font-size: 10pt;
  background-color: rgba(255, 128, 0, 0.3);
  color: rgb(200, 0, 0);
  padding: 0.2em 0.5em 0.1em;
  border: solid rgb(200, 0, 0) 1px;
  fill-opacity: 0.2;
  display: none;
  z-index: -1;
}

.showing {
  display: block;
}

<h3>Move the mouse over any answer to see all answer types.</h3>
<p>Which of these is a way to greet someone?</p>
<p title="Correct answer">Hello world</p>
<p title="Wrong answer">Goodbye world</p>
<p>What color is an apple?</p>
<p title="Correct answer">Red</p>
<p title="Wrong answer">Blue</p>

这篇关于显示所有“标题"一页上一次显示工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！