如何添加工具提示和/或链接到占位符文本

Question

所以我有一个带有占位符文本的文本区域，如下所示：

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

我想我的用户可能不知道 Markdown、BBCode 或 HTML。 如果我能把这些词变成解释每一个词的文章的链接，那就太棒了。 这三个词中每一个的鼠标悬停的单独工具提示也可能有效。

Answer 1

试试这个

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

Answer 2

像这样：

工作小提琴链接

网址：

<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

您可以实现由 bootstrap 提供的工具提示（因为目的是向最终用户显示信息）： https : //v4-alpha.getbootstrap.com/components/tooltips/

或 Jquery 工具提示： https : //jqueryui.com/tooltip/

那里提到了示例供您参考。

Answer 4

请参阅更新的小提琴，我希望它可以帮助您：

小提琴

 $('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>