Show All "title" Tooltips At Once On One Page

Thank you for the answers. I edited my question though: I'm trying to show all the tooltips on the page itself. And there are too many

tags on the page to add a class to

Solution 1:

Updated Answer

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:

• 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.

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 textvar indicOffsetTop = 10;
var indicOffsetLeft = 5;

// retrieve all the answer paragraphs from the DOMvar 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 textvar 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 itvar 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 pointdocument.body.appendChild(indic);
});

// put all the newly created answer-type indicator divs into a variable for later accessvar 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 answerfunctionshowTitleInfo() {
  
  // 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 answerfunctionhideTitleInfo() {
  
  // 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.2em0.5em0.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><ptitle="Correct answer">Hello world</p><ptitle="Wrong answer">Goodbye world</p><p>What color is an apple?</p><ptitle="Correct answer">Red</p><ptitle="Wrong answer">Blue</p>

Solution 2:

Easy way, check this out.

HTML:

<pclass="display_all_title"></p>

JS:

var all_title = "";

$("body").find('p[title]').each(function() {
    all_title += $(this).attr('title') + " ";
});
$('p.display_all_title').html(all_title);

JsFiddle:https://jsfiddle.net/fhepoeb5/