Solution 1 :

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;
}

Solution 2 :

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">&#8226; 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 &bull;

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 = "&#8226; Hover me";
<div id="bullet"></div>

Solution 3 :

Use

<div title="&#8226; I want bullet">Hover me</div>

Solution 4 :

We can create bullet in other elements by using the default CSS of li element.


div{
  display: list-item;
  list-style: list-item;
}

Problem :

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>

Comments

Comment posted by Richard

Does adding

Comment posted by str

title="• I want bullet"

Comment posted by Umar Abdullah

Try code • with title

Comment posted by Nipun Jain

can you share you js code to show what you are doing to achieve it ?

Comment posted by Thomas

in JS (react) you can always use the unicode version:

Comment posted by Nipun Jain

Why do this if you can simply just use

Comment posted by Douglas R. Santos

change padding to margin, and you don’t really need the A

Comment posted by Gangadhar Gandi

@Douglas Santos, Edited. Thanks

Comment posted by Gangadhar Gandi

@NipunJain, The question is for the div element.

Comment posted by Nipun Jain

I think in

Comment posted by obscure

In what way are you trying to add the bullet point via javascript?

Comment posted by obscure

I’ve refined my answer.

By