CODEWITHSUNDEEP
javascriptjqueryknockout.jstitleknockout-mvc
3 rules
3 rules

Reputation: 1409

Set "title" of selected value from dropdown after selection using knockout

I am using knockout js with ASP.NET MVC. I want to show the selected value's text on title when user hover on the selected value after selecting on the dropdown. So if bigger value hidden goes can show in title. like: if I have three values One, Two , BiggerValuethathidden.

So now obviously if my dropdown size is not that much bigger like third value, my third value will go hidden after size defined for dropdownlist.So I want to show when set value as title on hover.

Now I have try to implement the dropdownlist bind like this:

  <select class="form-control" data-bind="options: Accounts, optionsCaption: ' -- ', optionsText: function (item) { return item.AccountName }, optionsValue: function (item) { return item.Id }, value:AccountId, click: setTitle" required="required" data-parsley-required-message="Account is required" id="ddlAccounts">

To Set after so many searches , I am trying to do it like this:

<div title="" id=dvAccount">
      <select class="form-control" data-bind="options: Accounts, optionsCaption: ' -- ', optionsText: function (item) { return item.AccountName }, optionsValue: function (item) { return item.Id }, value:AccountId, click: setTitle" required="required" data-parsley-required-message="Account is required" id="ddlAccounts">
</div>

click event function based on Solution:

setTip = function(c, event){
            var element = event.currentTarget;
            var qref = element.getAttribute('Qref');
            var click_id = element.id;
            return true;
        }

Where am I going wrong?

Please some one help me to do this tricky trick!

Upvotes: 0

Views: 1305

Answers (2)

3 rules
3 rules

Reputation: 1409

Uffffff it is accidently or I don't know but from last 3 questions I asked question and me myself post my answer, this time again.

I found an extreme helpful solution for title of dropdown selected value:

Just use this jquery and css combination:

$('select').each(function(){
            var tooltip = $(this).tooltip({
                selector: 'data-toggle="tooltip"',
                trigger: 'manual'
            });
            var selection = $(this).find('option:selected').text();
            tooltip.attr('title', selection)

            $('select').change(function() {
                var selection = $(this).find('option:selected').text();
                tooltip.attr('title', selection)
            });
        });

Thanks to TSV for such faster response and help me but this one is better as per my application.

Upvotes: 0

TSV
TSV

Reputation: 7641

You can use "attr" binding ("attr: { title: AccountId }" - you can put another (human-readable) value instead of AccountId):

<div data-bind="attr: { title: AccountId }" id=dvAccount">
      <select class="form-control" data-bind="options: Accounts, optionsCaption: ' -- ', optionsText: function (item) { return item.AccountName }, optionsValue: function (item) { return item.Id }, value:AccountId, click: setTitle" required="required" data-parsley-required-message="Account is required" id="ddlAccounts">
</div>

Upvotes: 1

Related Questions