Question

所以我有一个textarea，其占位符文本如下：

<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

像这样：

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

您可以通过bootstrap实现Tooltip（目的是向最终用户显示信息）：https://v4-alpha.getbootstrap.com/components/tooltips/

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

这里提到的例子供您参考。

Answer 4

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

Fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: