Customized Bootstrap popover for search-box

I searched, searched, and searched and did not find anything even close to fulfill my assignment. Now I'm ready to post my code.

HTML:
 <div class="btn searchcontainer" id="searchcontainer" style="margin-top: 50px; margin-right: 25px; border: 1px solid #D7D7D7";">
               <input type="search" class="productsearch select" value="@(string.IsNullOrEmpty(ViewBag.SearchWord) ?"Search Catalog... ":ViewBag.SearchWord)" onclick="if(this.value=='Search Catalog... '){this.value=''; this.style.color = '#000000';}" onblur="if(this.value==''){this.value='Search Catalog... '; this.style.color = '#D7D7D7';}" style="@(string.IsNullOrEmpty(ViewBag.SearchWord) ?"width:15em; border: 0px; color:#D7D7D7;": "width:15em; border: 0px; color:#000000;")" rel="popover" data-placement="bottom" data-content="<div class='popover-error'>You must enter search criteria</div>" data-color="pink" name="searchKeyword" id="searchKeyword"/><i class="fa fa-times-circle fa-lg" id="clear-search"></i> <a id="btn-search">Go &gt;</a>
  </div>

Javascript:
<script type='text/javascript'>
       $('#btn-search').click(function(){
           var $search = $('#searchKeyword');
           if (!($search.val().length > 0 && $search.val().indexOf("Search") < 0)) {
               $("#searchKeyword").popover({ html: true, placement: 'bottom'});
               $("#searchKeyword").popover('show');
               $('.popover').css('top',parseInt($('.popover').css('top')) + 10 + 'px')
           }  
           return false;
       });
    </script>

CSS:

.popover {
    border-radius: 6px;
}

[rel=popover][data-color=pink] + .popover {
    background: #F2DEDE;
    border: 1px solid #F2DEDE;
}

    [rel=popover][data-color=pink] + .popover.bottom .arrow {
        top: -17px;
        left: 50%;
        /*margin-left: -5px;*/
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-bottom: 19px solid  #F2DEDE;
    }

     [rel=popover][data-color=pink] + .popover .arrow,  [rel=popover][data-color=pink] + .popover .arrow:after {
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-bottom: 19px solid  #F2DEDE;
    }
/*-----------------------------*/

.popover-error {
    color: #B94A48;
    font-size: 12px;
    font-weight: bold;
}

Dynamic Bootstrap Popover on empty search

 Searching the Internet for something suitable for my assignment I did not find anything interesting. Some sites are closed, some - not. I came out with my own code, which works in MVC/Bootstrap/Knockout environment.

HTML:

 <div class="btn searchcontainer" id="searchcontainer" style="margin-top: 50px; margin-right: 25px; border: 1px solid @(string.IsNullOrEmpty(ViewBag.productListJSON) ? "red" : "#D7D7D7");">
               <input type="search" value="@(string.IsNullOrEmpty(ViewBag.SearchWord) ?"Search Catalog... ":ViewBag.SearchWord)" onclick="if(this.value=='Search Catalog... '){this.value=''; this.style.color = '#000000';}" onblur="if(this.value==''){this.value='Search Catalog... '; this.style.color = '#D7D7D7';}" style="@(string.IsNullOrEmpty(ViewBag.SearchWord) ?"width:15em; border: 0px; color:#D7D7D7;": "width:15em; border: 0px; color:#000000;")" rel="popover" data-placement="left" data-content="No Records Found" data-original-title="Alert" name="searchKeyword" id="searchKeyword" required/><a id="btn-search">Go &gt;</a>
</div>

Javascript:
<script type='text/javascript'>
         var productList = @Html.Raw(Json.Encode(@ViewBag.productListJSON))
         $(window).load(function() {
             if (productList == "") {
                $("#searchKeyword").popover('show');
            }
         });
    </script>

What it does: it displays a popover only when search return empty set:

Search box with a link inside

Doing a project, I had to implement a search-box with link inside in knockout-bootstrap environment. Before doing something like this, I Googled the Internet and found out that there is no solution on popular sites. So, I decided to write by myself. It a very easy and very elegant piece of code.

Here it is:
<div class="row">
    <div class="btn searchcontainer" id="searchcontainer"><input type="search" placeholder="Search Catalog..." style="width:15em; border: 0px;" name="searchKeyword" id="searchKeyword" required/><a id="btn-search">Go &gt;</a></div>
</div>

Couple days later... Placeholder does not work in IE9. I had to come up with some different code and I did:

 <div class="btn searchcontainer" id="searchcontainer" style="margin-top: 50px; margin-right: 25px;">
               <input type="search" value="@(string.IsNullOrEmpty(ViewBag.SearchWord) ?"Search Catalog... ":ViewBag.SearchWord)" onclick="if(this.value=='Search Catalog... '){this.value=''; this.style.color = '#000000';}" onblur="if(this.value==''){this.value='Search Catalog... '; this.style.color = '#D7D7D7';}" style="@(string.IsNullOrEmpty(ViewBag.SearchWord) ?"width:15em; border: 0px; color:#D7D7D7;": "width:15em; border: 0px; color:#000000;")" name="searchKeyword" id="searchKeyword" required/><a id="btn-search">Go &gt;</a>
            </div>

I think, it will work for IE 9 and IE 10 (cross the fingers)

Knockout-Bootstrap

Working in Bootstrap-Knockout environment, I have to create some elements to enhance the application. I found it's not easy to work  in this environment because Knockout dominates all the time. Therefore, I found a very good piece of software which work for me.
The code is in http://billpull.github.io/knockout-bootstrap/js/knockout-bootstrap.min.js

It's much easier to work with this library than  raw bootstrap and knockout.

Changing appearance of Bootstrap ToolTip

Today I worked on Bootstrap tooltips. I needed to set up several different tooltips on one page. The problem was with width of the Tooltips. I can not have the same width for all of them and had to set up different width for different tooltips. Thanks article, I found the way to set up the different width.

Each division has an unique class name (business_name and business_description) and I changed tooltip set up only this class (css)

/*specially for this template I changed Bootstrap tooltip width to handle a Product name*/
.business_name + .tooltip > .tooltip-inner {
    width: 350px;
}
/*specially for this template I changed Bootstrap tooltip width to handle a Product description*/
.business_description + .tooltip > .tooltip-inner {
    width: 350px;
}

These definitions overwrite Bootstrap tooltip and create a new setup.