codeigniterフォームエラー時にブートストラップツールチップが自動的に起動しない

Question

私のcodeigniterプロジェクトでフォームを送信するときにエラーが発生した場合、ブートストラップツールチップが自動的に表示されます。

しかし、私は、ブートストラップツールチップに

質問示すために、入力をクリックする上で維持する必要が何らかの理由：私は、フォームのエラーを持っている場合は、それがツールチップが出て、私は任意のものをクリックすることを示していることを確認する方法を？

スクリプト

<script type="text/javascript"> 
<?php if ($error_title != '') {?> 
$(document).ready(function() { 
    $('input[name=title]').tooltip({ 
     placement: "right", 
     title: '<?php echo $error_title;?>', 
     trigger: "focus" 
    }); 
}); 
<?php }?> 
</script> 

フルビュー

<?php echo $header;?><?php echo $navbar;?> 

<?php echo form_open_multipart('questions/ask', array('id' => 'form-ask'));?> 

<div class="container"> 
<div class="row medium-spacer"> 
<div class="col-sm-8"> 

<div class="form-group"> 
<label class="title_label" for="title">Title: </label> 
<span class="title_input"> 
<?php 

$title_array = array(
    'name' => 'title', 
    'value' => $title, 
    'id' => 'input-title', 
    'class' => 'form-control', 
    'data-toggle' => 'tooltip', 
); 

echo form_input($title_array);?> 

</span> 
</div> 

<div class="panel ask panel-default"> 
    <div class="panel-heading"> 
    <ul class="nav nav-tabs"> 
    <li class="active"><a data-target="#ask" data-toggle="tab"><i class="fa fa-code" aria-hidden="true"></i> Ask Question</a></li> 
    <li><a data-target="#preview" data-toggle="tab"><i class="fa fa-eye" aria-hidden="true"></i> Preview</a></li> 
    </ul> 
    </div> 
    <div class="panel-body"> 
    <div class="tab-content"> 
    <div class="tab-pane fade in active" id="ask"> 
    <div class="form-group"> 
    <?php echo form_textarea('message', '', array('id' => 'message', 'class' => 'form-control'));?> 
    </div> 
    </div> 
    <div class="tab-pane fade" id="preview"> 
     <div class="preview-message"></div> 
    </div> 
    </div> 
    </div> 
</div> 


<div class="form-group"> 
<?php echo form_submit('ask', 'Post Your Question', array('class' => 'btn btn-primary'));?> 
</div> 

</div> 



<div class="col-sm-4"> 
<div class="well"> 
<ul class="list-unstyled"> 
<li>For blocks of code, to preserve newlines, use one of the following methods:</li><br/> 
<li> 
<ul> 
    <li>Single Line Backtick Escapes<code>`Example`</code></li> 
    <li>Indent everything four (4) spaces or</li> 
    <li>(3) Backticks start and end of code<br/><br/> 
<pre> 
``` 
&lt;div class="form-group"&gt; 
&lt;/div&gt; 
``` 
</pre> 
</li> 

</ul> 
</li> 
</ul> 
</div> 
</div> 

</div> 
</div> 

<?php echo form_close();?> 

<script type="text/javascript"> 
<?php if ($error_title != '') {?> 
$(document).ready(function() { 
    $('input[name=title]').tooltip({ 
     placement: "right", 
     title: '<?php echo $error_title;?>', 
     trigger: "focus" 
    }); 
}); 
<?php }?> 

$(document).ready(function() { 
    $("a[data-target=\'#preview\']").on('click', function(e){ 
     $.ajax({ 
      url: '<?php echo base_url();?>question/ask/preview', 
      type: "post", 
      data: {'message': $('#message').val()}, 
      dataType: "json", 
      success: function(json){ 
       $('.preview-message').html(json['preview']); 
      } 
     }); 
    }); 
}); 
</script> 

<?php echo $footer;?> 

Answer 1

終わりソリューション.tooltip('show');を使用して

$(function() { 
    $('input[name=title]').tooltip({ 
     placement: "right", 
     container:'body', 
     title: '<?php echo $error_title;?>', 
     /*trigger: "hover"*/ 
    }).tooltip('show'); 
}); 

Answer 2

$(document).ready(function() { 
 
    $('[title]').tooltip({ 
 
     position: {my: "left top", at: "left bottom"} 
 
    }).tooltip('open'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 

 
Title <input name="title" title="Im a tooltip!">