I have created this styled-select, due to my requirements, and it is shown in the example below. Now if the options are longer than the frame, they won't be shown (which is what I require). I want some functionality in order to leave the cursor over any option and the whole text of that option is shown line an info-box.
I know that I should use hover but I could not remember the name of that functionality.
$(function() {
$('.styled-select select').hide();
$("select#elem").val('0');
$('.styled-select div').each(function() {
var $container = $(this).closest('.styled-select');
$(this).html($container.find('select option:selected').text());
});
$('.styled-select div').click(function() {
var $container = $(this).closest('.styled-select');
var opLen = $container.find('select').children('option').length;
if (opLen < 5) {
$container.find('select').show().attr('size', opLen).focus();
} else {
$container.find('select').show().attr('size', 5).focus();
}
});
$('.styled-select select').click(function() {
var $container = $(this).closest('.styled-select');
var text = $container.find('select option:selected').text();
$container.find('div').html(text);
$container.find('select').hide();
});
$('.styled-select select').focusout(function() {
var $container = $(this).closest('.styled-select');
$container.find('select').hide();
});
}); .styled-select select {
position: absolute;
background: transparent;
padding-top: 5px;
font-size: 18px;
font-family: 'PT Sans', sans-serif;
color: black;
border: 0;
border-radius: 4;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
z-index: 1;
outline: none;
top: 42px;
box-shadow: 0 2px 2px 0 #C2C2C2;
}
.styled-select {
background: url('../img/campaignSelector.png') no-repeat right;
background-color: white;
height: 42px;
position: relative;
margin: 0 auto;
box-shadow: 0 2px 2px 0 #C2C2C2;
background-position: 97% 50%;
}
.styled-select option {
font-size: 18px;
background-color: white;
margin-left: 3px;
}
.styled-select option:hover {
//here
}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<div class="styled-select" style="width: 301px; margin:5px 0 0 10px;">
<div id="userChannelDivId" style="font-size:18px; position: absolute; top: 8px; left: 5px; width: 300px; height: 42px; text-overflow: ellipsis; padding: 0 30px 0 0; white-space: nowrap; overflow: hidden;"></div>
<select id="userChannelId" name="userChannelId" style="width:100%">
<option value="">--- Select ---</option>
<option value="6040224291703">This is a text long enough to go outside frame 01</option>
<option value="6036780606903">This is a text long enough to go outside frame 02</option>
<option value="6038009946703">This is a text long enough to go outside frame 03</option>
<option value="6037196648903">This is a text long enough to go outside frame 04</option>
<option value="6040601588703">This is a text long enough to go outside frame 05</option>
<option value="6040080586303">This is a text long enough to go outside frame 06</option>
<option value="6040602117503">This is a text long enough to go outside frame 07</option>
<option value="6038006580703">This is a text long enough to go outside frame 08</option>
</select>
</div>UPDATE:
I can not use title because these options are generated by getting data from database as follow:
<form:select id="campaignGoalId" path="campaignStructureList[${status1.index}].dataSourceModelList[${status2.index}].goalId" style="position: absolute;">
<form:option value="" label="--- Select ---" />
<form:options items="${campaignConfigurationModel.gaGoalList}" itemValue="goalId" itemLabel="goalIdName" />
</form:select>
Why don't you use the title attribute ?
<option title="This is a text long enough to go outside frame 08">
This is probably the easiest way.