我有一个带有工具提示的简单表单输入字段。如何设置工具提示的样式,使其位于输入字段标签旁边?
= 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"}
答案 0 :(得分:1)
您可以像这样使用引导程序行和列。
<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>
有关引导网格系统的更多信息:GridSystem