how to add css style and data-placement property=“top” for tooltips using the title attr- Javascript/CSS

Question

I want to add a tooltip on hover over an icon, I want to it a simple way, I'm adding the title attribute to get the tooltip

html:

<div class="container">
<div class="block">

</div>
  <div class="row">
    <div title="hovered text"data-placement="top" class="tooltiptext">
    
      <span class="tooltips"onmouseover="hover(this)">
   Hola hover</span> 
    </div>
  </div>
    
</div>

http://jsfiddle.net/4sp1ufgn/

however I havent found a way yet to:

1. style the tooltip using the title attribute
2. the data-placement property does not work on title attribute.

even when I have value as "top" for data-placement, it still renders below the text. Any idea what would be the fix for the above 2 issues? Thanks in advance.

Answer 1

You can use the w3schools example, which is written only in HTML and CSS.

CSS Tooltip Example