search

kazzkiq / balloon.css

Simple tooltips made of pure CSS
https://kazzkiq.github.io/balloon.css/
MIT License
5.03k stars 448 forks source link

Not working with text <input> #133

Closed vasyl-shumskyi closed 4 years ago

vasyl-shumskyi commented 4 years ago

Hello,

Does balloon works with text <input>?

<input 
  class="ant-input ant-input-sm" 
  placeholder="${Date_Template}" 
  style="width: 201px" 
  name="template" 
  title="${date_hint()}" 
  onchange="add_rule_to_db(this, ${id})" 
  value="${Date_Template}"  
  aria-label="${date_hint()}" 
  data-balloon-pos="down" 
/>

Thanks!

kazzkiq commented 4 years ago

Balloon.css uses pseudo-elements and thus will not work directly with self-closing tags such as <input>, <img>, <hr>, etc.

A workaround is use another element wrapping those, like this:

.balloon-wrapper {
  display: inline-block;
}
<div class="balloon-wrapper" aria-label="${date_hint()}" data-balloon-pos="down">
  <input 
    class="ant-input ant-input-sm" 
    placeholder="${Date_Template}" 
    style="width: 201px" 
    name="template" 
    title="${date_hint()}" 
    onchange="add_rule_to_db(this, ${id})" 
    value="${Date_Template}"  
  />
</div>