We can use before psuedo element on the element to achieve this.
.html
/* Added a title class to the element */
<div class="title" title="I want bullet">Hover me</div>
.css
.title:before {
content:"A";
width:10px;
height:10px;
border-radius:50%;
background: #000;
margin-right: 5px;
display:inline-block;
}
Generally speaking you can use a HTML entity to replace characters which aren’t present on your keyboard.
This is simply down by looking up the character your after from a reference page like
https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
write down it’s decimal value – which is 8226 for a bullet point – put a &# before and a ; after this value and finally add this to your string.
So
<div title="I want bullet">Hover me</div>
becomes
<div title="I want bullet">• Hover me</div>
Unfortunately though such numbers are hard to remember so there’s the possibility to reference such an entitiy by it’s name too. The entitiy name for the bullet point character is bull which you can add to your string like •
If you want to add the bullet point to a <div>
element using Javascript you need to use it’s .innerHTML property.
Here’s an example:
document.getElementById("bullet").innerHTML = "• Hover me";
<div id="bullet"></div>
Use
<div title="• I want bullet">Hover me</div>
We can create bullet in other elements by using the default CSS of li
element.
div{
display: list-item;
list-style: list-item;
}
Is it possible to add a bullet like this (•), to div title?
EDIT
I’m trying to do it from javascript code (react) and it writes in the code “?” sign, and NOT •
<div title="I want bullet">Hover me</div>
@Douglas Santos, Edited. Thanks
@NipunJain, The question is for the div element.
I’ve refined my answer.