Question

有人可以告诉我如何设置html textarea的title属性的样式。我试过this jfiddle link但似乎没有用。我正在使用Chrome浏览器代码如下。

＆＃13;

<li>
   <label for="description">Nature of Visit</label>
   <textarea class = "description" name="description" id="description" placeholder="required" required title="Must be at least 8 characters."></textarea>
</li>

＆＃13;

css代码在这里。

＆＃13;

textarea[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

＆＃13;

Answer 1

您无法设置默认标题样式

例如，你可以使用bootstrap：

<textarea data-toggle="tooltip" data-placement="bottom" title="My title">

</textarea>

http://getbootstrap.com/javascript/#tooltips

Answer 2

您可以将jqueryui工具提示用于可自定义，可主题化的工具提示，替换原生工具提示。

HTML：

<div ng-if="activity.id === 'actor' && propertyFromSecond.ngrepeat ==='actor'">

JS：

<p>Hover the field to see the tooltip.</p>
<textarea class = "description" name="description" id="description" placeholder="required" required title="Must be at least 8 characters."></textarea>

See JsFiddle !

也JQuery UI Reference

JS，CSS参考文献：

$(function() {
    $( document ).tooltip();
});

Answer 3

如果你只想使用css，你可以将所有东西都包装在div中，并用CSS触发tooltip元素的显示。

然后，您可以根据需要自定义工具提示元素（字体，颜色，位置）。

容器必须相对于绝对元素相对位置才能获得正确的定位。有关CSS定位的更多信息https://developer.mozilla.org/en/docs/Web/CSS/position

HTML

  <div class="input">
    <h4>Hover me</h4>
    <span>this is the tooltip</span>
  </div>

的CSS

*{
  font-family:Helvetica;
}

.input{
  position:relative;
}
.input span{
  position:absolute;
  top:1.5em;
  left:1.5em;
  background:red;
  color:white;
  padding:0.4em;
  opacity:0;
  transition:all 1s;
}

.input:hover span{  
  opacity:1;
}

设置HTML Textarea的标题属性的样式

3 个答案: