Простая форма метки с всплывающей подсказкой - PullRequest
Новая
       59

Простая форма метки с всплывающей подсказкой

0 голосов
/ 21 ноября 2018

enter image description here

У меня есть простое поле ввода формы с всплывающей подсказкой.Как я могу стилизовать всплывающую подсказку, чтобы она была рядом с меткой поля ввода? 

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

1 Ответ

0 голосов
/ 21 ноября 2018

Вы можете использовать строку и столбец начальной загрузки следующим образом. 

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

Дополнительная информация о Grid-системе начальной загрузки: GridSystem

...