HTML / Javascript - try to have page pointers as guidance

I am trying to get this small tutorial to show up the first few 5 seconds pointing to the menu bar on visiting the webpage. Anyone can tell me how I can do that with HTML CSS or Javascript?

I circled it with red of what I wanted on the image.

[URL=s32.photobucket.com/user/Valdimir_Pieter/media/…
– Valdimir
Jun 20 at 13:49

Are you trying for this? css-tricks.com/snippets/jquery/smooth-scrolling
– Manoj Kumar
Jun 20 at 13:52

Could you please share your sourcecode? And to answer your questions: Yes, i would use an icon or even better a (svg) image. And to answer your second question: To position an element at a specific point use css positioning. You can use "position: absolute; top:100px; left:100px" to position an element 100px from the top and 100px from the left.
– Tim Gerhard
Jun 20 at 13:52

@TimGerhard well i don't really have a code for the tutorial yet, only for web page as you can see on the image. what i basically want is that icon with the small text stating what to do for few seconds or showing until the user made a decision(on click) it disappears
– Valdimir
Jun 20 at 14:00

@ManojKumar no not really i want the have this small guide/ pointer with text like on the image i shared to showup on visiting the webpage
– Valdimir
Jun 20 at 14:01

1 Answer
1

One and easy solution is to create an overlay, which will cover the whole page. The purpose of the overlay will than catch the user click, and will destroy itself and also the tooltip.

To create the tooltip just specify the target element, for the tooltip should be created, the easiest way is to use css selector and jQuery.

With jQuery you can than find the target element on the page, get its position and size and according to that create the tooltip element as well.

Here is quick example (also as a fiddle https://jsfiddle.net/2c0q91np/):

$(function() {
// Find the target element on the page
var target = $(".menu li:nth-child(4n)");
var overlay = null;
var tooltip = null;

// Creates overlay which will handle the first click
function createOverlay() {
overlay = $("

").appendTo("body");

// When user clicks somewhere on the page the overlay will handle the click
overlay.one("click", destroyOverlay);
}

// Destroys the overlay and tooltip
function destroyOverlay() {
if(overlay) {
overlay.remove();
overlay = null;
}
if(tooltip) {
tooltip.remove();
tooltip = null;
}
}

// Creates tooltip for the target element
function createTooltip(text) {
// Get the position of the target
var pos = target.position();
// Get the height of the target
var height = target.outerHeight();

// Create the tooltip
tooltip = $("

")
.html(text)
.appendTo("body")
.css({
"top": pos.top + height + "px",
"left": pos.left + "px"
});
}

createOverlay();
createTooltip("Click on one of the tabs to<br>quickly scroll through the page!");

// Desotroy tooltip automatically after 5 seconds
setTimeout(destroyOverlay, 5000);
});

body {
background: black;
font-family: Verdana;
font-size: 12px;
}

.menu {
border: 1px solid gray;
padding: 0;
margin: 0;
width: 100%;
display: flex;
}

.menu li {
list-style-type: none;
color: gray;
padding: 15px;
flex: 1;
text-align: center;
}

.menu li + li {
border-left: 1px solid gray;
}

.menu li a {
color: gray;
text-decoration: none;
}

.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255,255,255,.0001);
z-index: 999;
}

.tooltip {
position: absolute;
z-index: 1000;
margin: 10px;
color: #fff;

width: 180px;
height: auto;
background: red;
padding: 10px;
}

.tooltip:before {
content:"";
position: absolute;
left: 25%;
transform: translate(-50%,-26px);
width: 0;
height: 0;
border-style: solid;
border-width: 0 13px 26px 13px;
border-color: transparent transparent red transparent;
}

https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
<ul class="menu">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Product</a>
</li>
<li>
<a href="#">Shop</a>
</li>
<li>
<a href="#">About the brand</a>
</li>
<li>
<a href="#">Join us</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.