Javascript-форум - Стиль подсказки в CSS

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Стиль подсказки в CSS (https://javascript.ru/forum/misc/58152-stil-podskazki-v-css.html)

Стиль подсказки в CSS

Доброго времени суток, помогите решить проблему. Нужно после клика на первый блок средствами явы прилепить ему стилизованную подсказку(прописана в стиле). Чтобы подсказки не накладывались (стилизованная и браузерная стандартная), атрибут title не подойдет. Как видно со вторым блоком, можно назвать подсказку например DATAtitle и тогда браузер свою стандартную не дублирует.

Но возникает вопрос: как присвоить блоку тот же самый DATAtitle через яваскрипт(после клика по блоку например)?
И второй вопрос, пока у блока нет стилизованной подсказки, при наведении вылезает пустота, обведенная параметром border из стиля, как сделать чтобы он не выводился если подсказка пустая?

Спасибо всем кто чем поможет, посоветует.

<script>
function set_tittle(e){
e.title = 'Ахалай-махалай!'
}
</script>

<body>
<style type="text/css">
.div_title:hover::after 
{content: attr(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 class = "div_title" 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>

фонарик,

<!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>

рони, спасибо вам огромное, вы молодец, все теперь работает как надо :)