profi.spage.me

Tooltip using data attribute

You must add class sp_que and attribute data-tooltip to the tag

<SPAN class="sp_que" data-tooltip="Tooltip1: some hint text.">Text1</SPAN>

<DIV class="sp_que" data-tooltip="Tooltip2: some hint text.">Text2</DIV>

<IMG class="sp_que" data-tooltip="Tooltip: some hint text." alt="Help" src="/que.png">

You must add the DIV id=”tooltip” and jQuery code to the footer of your site.

<!--- this is div for tooltips --->
<div id="tooltip"></div>

$("[data-tooltip]").mousemove(function (eventObject) {
	$data_tooltip = $(this).attr("data-tooltip");	        
	$("#tooltip").text($data_tooltip).css({ 
		"top" : eventObject.pageY + 5,
		"left" : eventObject.pageX + 5
	})
	.show();
	}).mouseout(function () {
		$("#tooltip").hide().text("").css({
			"top" : 0,
			"left" : 0
		});
});

Above the hint text, you have to load these css properties.

.sp_que {
    margin-left: 15px;
    width: 10px;
}
#tooltip {
	z-index: 9999;
	position: absolute;
	display: none;
	top:0px;
	left:0px;
	background-color: #000;
	padding: 5px 10px 5px 10px;
	color: white;
	.opacity(0.5);
	.rounded(5px); 
}

Sample code.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<STYLE>
.sp_que {
    margin-left: 15px;
    width: 10px;
}
#tooltip {
  z-index: 9999;
  position: absolute;
  display: none;
  top:0px;
  left:0px;
  background-color: #000;
  padding: 5px 10px 5px 10px;
  color: white;
  .opacity(0.5);
  .rounded(5px); 
}
</STYLE>

<DIV class="sp_que" data-tooltip="Tooltip DIV: some hint text.">Text1</DIV>
<P><SPAN class="sp_que" data-tooltip="Tooltip SPAN: some hint text.">Text2 </SPAN>
<IMG class="sp_que" data-tooltip="Tooltip IMG: some hint text." alt="Help" src="https://spage.me/que.png"></P>

<!--- this is div for tooltips --->
<div id="tooltip"></div>

<SCRIPT>
$("[data-tooltip]").mousemove(function (eventObject) {
  $data_tooltip = $(this).attr("data-tooltip");         
  $("#tooltip").text($data_tooltip).css({ 
    "top" : eventObject.pageY + 5,
    "left" : eventObject.pageX + 5
  })
  .show();
  }).mouseout(function () {
    $("#tooltip").hide().text("").css({
      "top" : 0,
      "left" : 0
    });
});
</SCRIPT>

DEMO