дизайн, разработка и сопровождение сайтов

+7 (918) 8343905 / info@abeta.ru

Создание шаблона html для подсказки tooltip bootstrap



При разработке проекта необходимо было реализовать подписку на новости компании, для этого пользователь вводит свой email и подтверждает согласие путем установки флажка. По логике необходимо проверить установлен ли этот флажок перед тем, как сработает форма.

 

Для этого в html5 есть очень удобный атрибут required, благодаря которому, в случае невыполнения условия, пользователь видит предупреждающее сообщение в форме подсказки (tooltip). Однако стандартное представление всплывающей подсказки (tooltip) отличалось от утвержденного дизайном. 

 

 

 

Чтобы добиться нужного оформления, решено было воспользоваться стандартным параметром "template" для tooltip bootstrap. Для этого был подготовлен скрипт, который проверял отмечен ли флажок, если флажок не отмечен, то появлялось указанное сообщение. После этого подсказка стала такой:

 

 

 

 

Ниже приводится код скрипта, код формы и css стили новой подсказки (tooltip bootstrap).

 

HTML код формы

 

<form onsubmit="return checkFormS(this);" action='/index.php' id="example5" method='post' enctype='multipart/form-data'>
<div class="subscribe">
<span style="color:red;"><input class="textbox" name='su_email_reg' type="email" placeholder="Ваш e-mail" /></span>
<button type="submit" class="button mybut">Подписаться на новости</button>
<div class="check">
<div class="checkbox">  
<input value="None" id="field_terms1" name="mycheck1" type="checkbox"/>
<label for="field_terms1"></label>
<a href="#!" data-toggle="tooltip" id="sec_tooltip" data-placement="bottom" title="Чтобы продолжить, установите этот флажок"></a>
</div>
</div>
</div>
</form>
 

 

JavaScript код

 

<script type="text/javascript">    
function checkFormS(form)
{        
if(!$('#field_terms1').is(':checked')){            
$('#sec_tooltip').tooltip({template:'<div class="my_tooltip123"><div class="my-tooltip-arrow"></div><div class="my-tooltip-inner"><img src="img/flag.png" style="float:left;padding-right: 10px;padding-bottom: 10px;"><span style="font-size: 14px;font-family: WebnarRegular;">Чтобы продолжить, установите этот флажок</span></div></div>'});    
$('#sec_tooltip').tooltip('show');
form.mycheck1.focus();
return false;
}
else{$('#sec_tooltip').tooltip('destroy'); }
return true;        
}

$(document).click(function(e){ 
var elem = $("#example5"); 
if(e.target!=elem[0]&&!elem.has(e.target).length){
$('#sec_tooltip').tooltip('destroy'); 
} });
</script> 
 

 

CSS стили  

 

.my_tooltip123{
top: 0px;
left: -10px !important;
display: block;
width: 290px;
margin-top: 24px;	
padding-top: 6px;
background:#transparent;
}
.my-tooltip-inner{
background-color: #fff;
color: #1d1d1b;
padding: 10px 10px;
max-width: 350px;
text-align: left;
border-radius: 0;
}
.my-tooltip-arrow{
left: 7%;
margin-left: -5px;
border-width: 0px 5px 6px;
top: 0px;
position: absolute;
border-style: solid;
border-color: transparent;
width: 0px;
height: 0px;
border-bottom-color: #fff;
margin-top: 0px;
}
 
comments powered by HyperComments
Задать вопрос
Abeta - разработка и сопровождение корпоративных сайтов, интернет магазинов, сайтов визиток, шаблонных сайтов, посадочных страниц
Тел.: +7 9188 34 39 05
Email: info@abeta.ru