I'm trying to get map tips to behave as shown below.

  • Light grey background with very thin white border
  • A box that adjusts to the content rather than a fixed width of say...300px
  • A centred title using h1 or h2
  • Name, company and email in bold with the details all inline with each other (dependant on the longest word in bold).
  • A small white space
  • More details in bold with information on the same line not in bold

I'm struggling with aligning [% "Client Name" %] etc to the longest input (shown as "COMPANY NAME") and keeping the bold and normal text on one line.

enter image description here

Current code used:

  body {background-color: lightgrey!important; text-size: 15px; text-style: bold;}
  h1 {text-align: center; text-style: underline;}
  h4 {width: 500px; margin-left: 20px;}
<h1> ASSET </h1>
<h4>NAME: [% "First Name" %]   [% "Surname" %] </h4>
<h4>COMPANY NAME:  [% "Company Na" %]</h4>

Progress Report: Transformed into table format


body {background-color: #dddddd!important; font-family: sans-serif;}

table {border-collapse: collapse;}

tr {border: 2px solid white;}

td {white-space: nowrap; padding: 5px;}

td.bold {font-weight: bold;}

td.gap {background-color:white;padding:1px;}


<table style="width:100%">
<th colspan=1><h1>ASSET</h1></th>
<tr><td class="bold">NAME:</td><td> [% "First Name" %] [% "Surname" %] </td></tr>
<tr><td class="bold">COMPANY NAME:</td><td> [% "Company Na" %] </td></tr>
<tr><td class="gap"></td><td class="gap"></td></tr>
<tr><td class="bold">MANAGEMENT DATE:</td><td>[% "Mangement" %]</td></tr>

enter image description here

  • 1
    Can you share your current HTML code? Are you using a <table>?
    – thibautg
    Commented Sep 1, 2017 at 10:53
  • This is tabular data, why don't you use tables? Makes it much easier.
    – pLumo
    Commented Sep 1, 2017 at 11:28

1 Answer 1


Use a table:

<th colspan=2><h1>ASSET</h1></th>
<tr><td class="bold">NAME:</td><td>[% "First Name" %]   [% "Surname" %]</td></tr>
<tr><td class="bold">COMPANY NAME:</td><td>[% "Company Na" %]</td></tr>
  • 1
    To keep your text on one line, you can also add td { white-space: nowrap; } in your stylesheet, or add it to your <td> element: <td style="white-space: nowrap">
    – thibautg
    Commented Sep 1, 2017 at 12:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.