Description for each Option of a Select

Hi,
Does anyone know how can I create a web drop down list with different tool tip for each item?
I'm using chronoform V3.1 RC 5.2
Thanks
monak83

Hi monak83,

I don't think you can. You could do this with a group of radio buttons though.

Bob

througt javascript?
How can I do this?
I have found a script jQuery...can I put into chronoforms? (in FORM CODE -> javascript field)

Hi monak83 ,

Possibly, You'll need to load JQuery too and to be careful to avoid any conflicts between JQuery and MooTools.

Bob

How? Please can you show me the way?

Thanks

monak83

Hi monak83,

You can use jQuery with MooTools in no-conflict mode. There are various ways of doing this. The simplest is to add a line of script in the ChronoForms Form JavaScript box:

jQuery.noConflict();

This will free the $ operator which is used by MooTools, so you may need to update your own javascripts to use the longer jQuery operator.

There is also a neat Joomla! system plugin named SC jQuery that allows you to control on which pages jQuery is loaded, and will always load it in no-conflict mode.

Bob

I try this without a tooltip but with a new field:

HTML CODE:

<select id="mySelect">
    <option value="1" data-description="Item 1">Item 1</option>
    <option value="2" data-description="Item 2">Item 2</option>
    <option value="3" data-description="Item 3">Item 3</option>
</select>
<span id="description"></span>

JAVASCRIPT CODE:

$('#mySelect').change(function(){
    var $selected = $(this).find(':selected');
    
    $('#description').html($selected.data('description'));
}).trigger('change');

It doesn't works, it should show a diferent description for each option.
Can I solve it?
I have also tried to add jQuery.noConflict(); in javascript code but nothing!

You can see my form here:
http://www.sgagrafica.com/index.php?option=com_chronocontact&chronoformname=jquery

I'm waiting.
regards
monak83

Hi monak83,

Sorry but it you are waiting for me to solve your problem for you it could be a long wait. This isn't something that anyone else has asked for if I recall correctly, and I try to avoid using jQuery with Joomla!.

Bob

I don't undestood why if I try this form in an simple html page it works fine.
If I try it on chronoforms (raletive box html and javascript) it doesn't works.
Why? I should include some libraries?

Please help me!!!

Regards

monak83

Hi monak83,
The problem is that you are still using the $-function as a jQuery function, even after issuing the noConflict() method:

jQuery = jQuery.noConflict();
$('#mySelect').change(function(){
  var $selected = $(this).find(':selected');

  $('#description').html($selected.data('description'));
}).trigger('change');

You could try something like this instead:

jQuery.noConflict();
jQuery(document).ready(function($) {
  $('#mySelect').change(function(){
    var $selected = $(this).find(':selected');
    $('#description').html($selected.data('description'));
  }).trigger('change');
});

Or simply re-define a new operator for the jQuery-$ one:

j = jQuery.noConflict();
j('#mySelect').change(function(){
  var $selected = j(this).find(':selected');
  j('#description').html($selected.data('description'));
}).trigger('change');

/Fredrik

Dear Fredrik,
thanks so much for you reply adn for your solutions but any solutions works...I can't see description field.
You can see the two solutions here:

First solution:
http://www.sgagrafica.com/index.php?option=com_chronocontact&chronoformname=jquery

Second solution:
http://www.sgagrafica.com/index.php?option=com_chronocontact&chronoformname=jquery2

Can you help me?

Regards
monak83

Hi monak83,
While playing around using FireBug, I've noticed the following:
The event is not added to the entity, and the .data() method does not pull the HTML5 data- properties as values.
The latter is probably due to the version of jQuery being loaded being lower than 1.4.3. The former is most likely due to the code being executed before the actual html element has been created.

You could probably use the .ready() method to solve the first one, though you'd still have the issue of .data() not retrieving the values as intended.

/Fredrik

Thanks so much Fredrik,
but I cn't solve it because I'm dummy with jQuery and JavaScript.
To have the same operation how can I do?
I explain more: I would have a description text for each option of my select.
Do you know other solutions that can works in chronoform?

I can't go ahead with my form without this feature...please help me!!!
Thanks so much for your support

Regards
monak83

Hi monak83,

A few thoughts:

The simplest way to attach a tooltip to an option is to use the title attribute in the option tag.

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Click Me to Edit</label>
    <select class="cf_inputbox" id="select_0" size="1" title=""  name="select_0">
      <option value="">Choose Option</option>
      <option value="option 1" title='Aenean ligula ipsum, ornare et ultricies vitae, scelerisque eu mauris.' >option 1</option>
<option value="option 2" title='Sed tempus pulvinar erat.
Vivamus eleifend, diam vel volutpat viverra, 
purus arcu dictum sem, non laoreet enim risus dapibus tortor.' >option 2</option>
<option value="option 3" title='Maecenas congue eros nunc, et sollicitudin dui. Sed sodales mollis mi in hendrerit.' >option 3</option>
    </select>
  </div>
  <div class="cfclear"> </div>
</div>

[attachment=1]21-03-2011 16-17-29.png[/attachment]
Or you can add JavaScript (using MooTools) to display the selected option description in a div. Put this code in the Form JavaScript box:

window.addEvent('domready', function() {
  var select_0 = $('select_0');
  select_0.addEvent('click', function() {
    var selected = select_0.selectedIndex;
    var option = select_0.options[selected];
    option = $(option);
    var desc = option.getProperty('title');
    if ( $('detail') ) {
      $('detail').remove();
    }
    var detail = new Element('div', {
      id : 'detail',
      styles : {
        display : 'block',
        border : '1px solid silver',
        width : 150
      }
    });
    if ( desc ) {
      detail.innerHTML = desc;
      detail.injectAfter(select_0);
    }
   });
});

[attachment=0]21-03-2011 16-20-37.png[/attachment]

Bob

Thank You so much...it works gerat!!!

Another questions: I have two select with your hack that can show a description field. this description field is shown only one at time and not either one at the same time.
How can I do to see all two description field at the same time?
P.S. you can see my form here:
http://www.sgagrafica.com/index.php?option=com_content&view=article&id=77&Itemid=120

Hi monak83,

You can't have more than one mouseover bubble open at the same time.

You could use a checkbox array instead of the drop-down and add an explanation 'small text' to each checkbox.

Bob