Question

I have path elements on my page which have an attribute “title” which is an html table of information. Here is an example:

<table>
<tr>
    <td>
        <b><u>California</u></b>
    </td>
</tr>
<tr>
    <td>
        <u>University</u>
    </td>
    <td>
        <u>Percent</u>
    </td>
</tr>
<tr>
    <td>
        California 1:
    </td>
    <td>
        6.6%
    </td>
</tr>
<tr>
    <td>
        California 2:
    </td>
    <td>
        1.2%
    </td>
</tr>
<tr>
    <td>
        California 3:
    </td>
    <td>
        0.5%
    </td>
</tr>
<tr>
    <td>
        California 4:
    </td>
    <td>
        10.1%
    </td>
</tr>
<tr>
    <td>
        California 5:
    </td>
    <td>
        3.6%
    </td>
</tr>
</table>

When I initially load the page, the poshytips look fine, but when I update a slider (which updates the tables), some tips get long decimal strings. The table above is from console.log of the what should be shown upon updating. However, the value “1.2%” appears as “1.20000000000000002%. “The values being input are read in from a csv are initially string values with exactly one decimal place. This is how I am updating the tips using d3 (the ‘maketip’ function just returns the table shown above):

state_path.transition()
  .duration(1000)
  .attr('title', function(d) {
    return maketip(d,y);
  })
  .each("end", function(d) {
    var $this = $(this);
    $this.poshytip("update", $this.attr('title') );
  });

Is there a way to prevent this, or a way to specify this table as the content for the object?

Answer 1

Here is the answer that I found — thanks for the comments:
Try giving poshytip the function instead of saving it to the title attr.

$('.county_path').poshytip({
        content:    function() { 
            return maketip(this.__data__.id, this.__data__.properties.name); 
        },
        className: 'tip-ihme',
        slide:      false,
        followCursor:   true,
        alignTo:    'cursor',
        alignX:     'center'
    });