фонарик,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<script>
function set_tittle(e){
e.classList.add('div_title')
e.dataset.title = 'Ахалай-махалай!'
}
</script>
<style type="text/css">
.div_title:hover::after
{content: attr(data-title);border: 1px solid red;position: absolute;width:200px;top: 30%;z-index: 1;background: rgba(255,255,230,0.9);left: 20%;
}
.div_DATAtitle:hover::after
{content: attr(DATAtitle);border: 1px solid #333;position: absolute;width:200px;top: 30%;z-index: 1;background: rgba(255,255,230,0.9);left: 20%;
}
</style>
<div style="max-width: 150px; border:1px solid blue; cursor:pointer; display:inline-block" onclick="set_tittle(this)">Прилепить подсказку</div>
<div class = "div_DATAtitle" DATAtitle='Подсказка класса DATAtitle. Т.к стандартного атрибута title нет, то и нет стандартной подсказки браузера' style="border:1px solid blue; cursor:pointer; display:inline-block; margin-left: 5px">DATAtitle</div>
</script>
</body>
</html>