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>
Categories: