0

I have an unordered list of checkboxes and respective list names and I would like to have tooltips for the selection options, i.e. when the user hovers over the list name (e.g. category 1) a tooltip appears with text. Unfortunately, I cannot amend the HTML code and can only add CSS. 

<ul>
  <li><input type="checkbox" class="cat_input" name="sgeodir_subcategory1a" value="1"> category 1</li>
  <li><input type="checkbox" class="cat_input" name="sgeodir_subcategory1b" value="1"> category 2</li>
<ul>

Is there any way to target the different list items and add tooltips? I was thinking perhaps via the "name" that is the only attribute that is different for each list item?

AlphaX
  • 615
  • 1
  • 11
  • 25
  • 2
    you can use attribute selector `input[name=sometext]` – Temani Afif Jan 11 '18 at 22:34
  • awesome thanks for pointing me in the right direction! – AlphaX Jan 11 '18 at 22:36
  • 1
    Something like [this](https://jsfiddle.net/pkur66y7/1/)? Will your values have some useful info in them? If so you can make the content of the before element the value `content: attr(value);` and it will be in the tooltip text – Josh Sanger Jan 11 '18 at 22:52
  • @JoshSanger Thats awesome Josh! Exactly what I needed! Thank you very much! The only problem is that it doesnt seem to work in firefox (I have the latest version), but only chrome. How would it have to be amended to work in FF as well? – AlphaX Jan 13 '18 at 15:26
  • @sol coud you perhaps help? – AlphaX Jan 14 '18 at 18:34
  • @AlphaX Hm. My apologies. I forgot you can't put pseudo elements on input tags in most browsers. My suggestion would be to use jquery or js to wrap each tag in a span, and put the pseudo element on the span instead. – Josh Sanger Jan 15 '18 at 02:29

0 Answers0