How to add tooltips and/or links to placeholder text

Question

So I have a textarea with placeholder text like this:

<textarea tabindex="4" placeholder="Type here. Use Markdown, 
BBCode, or HTML to format. Drag or paste images." id="ember1313" 
class="d-editor-input ember-text-area ember-view"></textarea>

I'm thinking my users probably won't know Markdown, BBCode, or HTML. It would be awesome if I could turn these words into links to articles explaining each one. A separate tool tip onmouseover of each of these three words might work as well.

Answer 1

try this

$('textarea').blur(function() {
  var inputVal = $(this).val(),
      titleText = $(this).attr('placeholder');
  if ( inputVal !=  '' ) {
    $(this).tooltip({
    title: titleText,
    trigger: 'focus'
    });
  }
});

Answer 2

Like this :

Working Fiddle Link

Html :

<textarea tabindex="4" title="Type here. Use Markdown, 
BBCode, or HTML to format. Drag or paste images." id="ember1313" 
class="d-editor-input ember-text-area ember-view"></textarea>

CSS :

.tooltip{
            display: inline;
            position: relative;
        }

        .tooltip:hover:after{
            background: #333;
            background: rgba(0,0,0,.8);
            border-radius: 5px;
            bottom: 26px;
            color: #fff;
            content: attr(title);
            left: 20%;
            padding: 5px 15px;
            position: absolute;
            z-index: 98;
            width: 220px;
        }

        .tooltip:hover:before{
            border: solid;
            border-color: #333 transparent;
            border-width: 6px 6px 0 6px;
            bottom: 20px;
            content: "";
            left: 50%;
            position: absolute;
            z-index: 99;
        }

Answer 3

You can implement Tooltip (as the intention is to show information to the end-users) provided by bootstrap : https://v4-alpha.getbootstrap.com/components/tooltips/

OR Jquery Tooltips: https://jqueryui.com/tooltip/

Examples are mentioned there for your reference.

Answer 4

See the updated fiddle i hope it helps you :

Fiddle

 $('textarea').hover(function(){ $('.d-editor-input').tooltip({ title: titleText, trigger: 'focus' }); })

 .tooltip{ display: inline; position: relative; } .tooltip:hover:after{ background: #333; background: rgba(0,0,0,.8); border-radius: 5px; bottom: 26px; color: #fff; content: attr(title); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: 220px; } .tooltip:hover:before{ border: solid; border-color: #333 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea tabindex="4" title="Type here. Use Markdown, BBCode, or HTML to format. Drag or paste images." id="ember1313" class="d-editor-input ember-text-area ember-view"></textarea>