CODEWITHSUNDEEP
cssruby-on-railsrubytwitter-bootstrap-3haml
SpongebobJunior
SpongebobJunior

Reputation: 629

Simple Form Label with tooltip

enter image description here

I have a simple form input field that has a tooltip. How can I style the tooltip so that it will be beside the input field label? 

= 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"}

Upvotes: 0

Views: 3316

Answers (1)

Isa Ataseven
Isa Ataseven

Reputation: 176

You can use bootstrap row and column like this.

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

More information about bootstrap Grid system : GridSystem

Upvotes: 1

Related Questions