Skip to main content
July 8, 2013
Question

Cfinput tooltip css styling

  • July 8, 2013
  • 1 reply
  • 625 views

Hi!

I have the code below and I want to know how to create a css rule to add style to the tooltip within cfinput. It is displayed by default, however, i want to format how it looks. Any ideas?

<div class="container">


<h1> Create user </h1>


<cfform  id="form" action="processusercreation.cfm" method="post" >


<table>

<tr>
<td id="formleft">
  Username
</td>
<td id="formright">
     <cfinput type="text"
        tooltip="Desired username, with 20 letters and numbers, no spaces"
        required="yes"
        validate="regular_expression"
        pattern="^[a-zA-Z0-9]+$"
        message="~Hey, there is something wrong with your username~"
        validateat="onsubmit,onserver"
        name="Username"
  maxlength="17">
     </td>
</tr>

This topic has been closed for replies.

1 reply

BKBK
Community Expert
Community Expert
July 9, 2013

The following solution might appear cumbersome, as it involves 2 CFM pages, but it is the only one I can think of:

In your form page:

<cfinput type="text"

        sourcefortooltip="tooltipstyle.cfm"

        required="yes"

        validate="regular_expression"

        pattern="^[a-zA-Z0-9]+$"

        message="~Hey, there is something wrong with your username~"

        validateat="onsubmit,onserver"

        name="Username"

      maxlength="17">

In the page tooltipstyle.cfm:

<!--- implement the style you want --->

<span style="color:red;font-size:200%;">Desired username, with 20 letters and numbers, no spaces</span>