MessageML and PresentationML tooltip attribute

[symphony-enrico]

Add tooltip attribute to the following elements:

<text-field>, <textarea>, <select><option>, <person-selector>, <button>

MessageML specifications

Attribute name	Optional	Type	Max length	Attribute description
title	true	String and accept \n	256	Definition of the description of the Element that will be shown in a tooltip

PresentationML specifications

Attribute name	Corresponding MessageML attribute	Notes
data-title	title	Despite title is a standard attribute, we can not customize the style and logic, that is why we use instead data-title

Examples

(Please note that {uniqueLabelId} is a 10 alphanumeric characters short id, url-friendly)

Text Field

<!-- MessageML -->
<messageML>   
  <form id="example">                        
    <text-field title="This only \n accept regex characters" label="Username" name="login" pattern="^[a-zA-Z]{3,}$"/>              
    <button name="send-answers" type="action">Submit</button>
  </form>
</messageML>

<!-- PresentationML -->
<div data-format="PresentationML" data-version="2.0"> 
  <form id="example"> 
    <div class="textfield-group">
      <label for="textfield-{uniqueLabelId}">Username</label>
      <span class="info-hint" data-title="This only \n accept regex characters"></span>
      <input id="textfield-{uniqueLabelId}" type="text" name="login" pattern="^[a-zA-Z]{3,}$"> 
    </div>
    <button type="action" name="send-answers">Submit</button> 
  </form> 
</div>

TextArea

<!-- MessageML -->
<messageML>
  <form id="example">
    <textarea name="justification" pattern="^((?!badword).)*$" title="This only \n accept regex characters" label="Justification"/>
    <button name="send-answers" type="action">Submit</button>
  </form>
</messageML>

<!-- PresentationML -->
<div data-format="PresentationML" data-version="2.0"> 
  <form id="example"> 
    <div class="textarea-group">
      <label for="textarea-{uniqueLabelId}">Justification</label>
      <span class="info-hint" data-title="This only \n accept regex characters"></span>
      <textarea id="textarea-{uniqueLabelId}" name="justification" pattern="^((?!badword).)*$"></textarea> 
    </div>
    <button type="action" name="send-answers">Submit</button> 
  </form> 
</div>

Dropdown

<!-- MessageML -->
<messageML>
  <form id="example">
    <select name="cities" label="Cities" title="Indicate your \n favorite city">     
      <option selected="true" value="ny">New York</option>     
      <option value="van">Vancouver</option>     
      <option value="par">Paris</option> 
    </select>
    <button type="action" name="send-answers">Submit</button> 
  </form>
</messageML>

<!-- PresentationML -->
<div data-format="PresentationML" data-version="2.0"> 
  <form id="example"> 
    <div class="dropdown-group">
      <label for="dropdown-{uniqueLabelId}">Cities</label>
      <span class="info-hint" data-title="Indicate your \n favorite city"></span>
      <select id="dropdown-{uniqueLabelId}" name="cities"> 
        <option selected="true" value="ny">New York</option> 
        <option value="van">Vancouver</option> 
        <option value="par">Paris</option> 
      </select> 
    </div>
    <button type="action" name="send-answers">Submit</button> 
  </form> 
</div>

Person selector

<!-- MessageML -->
<messageML>
  <form id="example">
    <person-selector label="Awesome users" name="awesome-users" title="Indicate \n awesome users"/>
    <button type="action" name="send-answers">Submit</button> 
  </form>
</messageML> 

<!-- PresentationML -->
<div data-format="PresentationML" data-version="2.0"> 
  <form id="example"> 
    <div class="person-selector-group">
      <label for="person-selector-{uniqueLabelId}">Awesome users</label>
      <span class="info-hint" data-title="Indicate \n awesome users"></span>
      <div class="person-selector" id="person-selector-{uniqueLabelId}" data-name="awesome-users"></div>
    </div>    
    <button type="action" name="send-answers">Submit</button> 
  </form> 
</div>

Button

<!-- MessageML -->
<messageML>
  <form id="example">
    <button title="Tooltip text \n should appear on hover" name="send-answers" type="action">Submit</button>
  </form>
</messageML>

<!-- PresentationML -->
<div data-format="PresentationML" data-version="2.0"> 
  <form id="example"> 
    <button data-title="Tooltip text \n should appear on hover" type="action" name="send-answers">Submit</button> 
  </form> 
</div>