Display tooltip on Label's hover?

Question

I have below HTML code ?

<label for="male">Hello This Will Have Some Value</label> 

But actually i dont have enough space to show this much long label. So i thought of creating label as below..

<label for="male">Hello...</label> 

Then i create a hidden field which will hold entire label value

<input type="hidden" name="Language" value="Hello This Will Have Some Value"> 

Now when user hovers mouse on Hello... can i show hidden field's value Hello This Will Have Some Value in tooltip using jquery?

Thanks!

Answer 1

You can use the "title attribute" for label tag.

<label title="Hello This Will Have Some Value">Hello...</label> 

If you need more control over the looks,

1 . try http://getbootstrap.com/javascript/#tooltips as shown below. But you will need to include bootstrap.

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Hello This Will Have Some Value">Hello...</button> 

2 . try https://jqueryui.com/tooltip/. But you will need to include jQueryUI.

<script type="text/javascript"> $(document).ready(function(){ $(this).tooltip(); }); </script> 

Answer 2

You don't have to use hidden field. Use "title" property. It will show browser default tooltip. You can then use jQuery plugin (like before mentioned bootstrap tooltip) to show custom formatted tooltip.

<label for="male" title="Hello This Will Have Some Value">Hello ...</label> 

Hint: you can also use css to trim text, that does not fit into the box (text-overflow property). See http://jsfiddle.net/8eeHs/