带工具提示的简单表单标签

Question

我有一个带有工具提示的简单表单输入字段。如何设置工具提示的样式，使其位于输入字段标签旁边？

= s.input :name, :label => 'Name', :as => :string, :input_html => { :value => model.name}, :required => true
%span.fa.fa-question-circle{"data-toggle" => "tooltip", :style => "float: right; display:inline-block;", :title => "Your Name"}

Answer 1

您可以像这样使用 bootstrap 行和列。

<html lang="en">
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-2">
          <label >Label</label>
          <i class="fa fa-info-circle" title="tooltip" data-toggle="tooltip" data-placement="right" aria-hidden="true"></i>  
        </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <input type="text" name="usrname"><br>
      </div>
    </div>

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});
</script>
</body>
</html>

有关 bootstrap 网格系统的更多信息：GridSystem

带工具提示的简单表单标签

Simple Form Label with tooltip

css

ruby-on-rails

ruby

twitter-bootstrap-3

haml