how to create a custom tooltip using title attribute without jquery

Question

I want to create a tooltip as shown in pic. Value in title tag is coming from controller.

This is my table code:

<table border="1" cellpadding="10">
  <tbody style="white-space: nowrap;">
    <tr ng-repeat="row in rows">
      <td style="width: 2%;">
        <input type="checkbox" 
               ng-model="tableSelection[$index]"
               style="margin-left: 10px;">
      </td>
      <td style="font-size: smaller; width: 27%; color: gray; white-space: nowrap;"
          ng-repeat="col in input_columns"
          droppable="dropable"
          drop-fn="drop"
          drop-index="$index"
          drop-data="col"
          title=""
          ng-click="openDialog($event,$index)"
          tempValue="">&lt;enter data&gt;</td>

      <td style="font-size: smaller; width: 27%; color: gray; white-space: nowrap;"
          ng-repeat="col in output_columns"
          droppable="dropable"
          drop-fn="dropOutput"
          drop-index="$index"
          drop-data="col"
          title=""
          ng-click="openDialogOutputConst($event,$index)">&lt;enter data&gt;</td>
    </tr>
  </tbody>
</table>

Can anyone help me how to provide a tooltip like this.

NiZa · Accepted Answer · 2016-03-29 13:44:06Z

1

Something like this?

td {
  position: relative;
}

td:hover:before {
  content: attr(data-title);
  position: absolute;
  background-color: yellow;
  top: 100%;
  width: 200px;
  white-space: normal;
  word-spacing: 200px; 
}

<table border="1" cellpadding="10">
  <tbody style="white-space: nowrap;">
    <tr ng-repeat="row in rows">
      <td style="width: 2%;">
        <input type="checkbox" ng-model="tableSelection[$index]" style="margin-left: 10px;">
      </td>
      <td style="font-size: smaller; width: 27%; color: gray; white-space: nowrap;" ng-repeat="col in input_columns" droppable="dropable" drop-fn="drop" drop-index="$index" drop-data="col" data-title="Idaho Illinois Indiana Iowa Kansas Missouri Nebraska Ohio"
      ng-click="openDialog($event,$index)" tempValue="">&lt;enter data&gt;</td>

      <td style="font-size: smaller; width: 27%; color: gray; white-space: nowrap;" ng-repeat="col in output_columns" droppable="dropable" drop-fn="dropOutput" drop-index="$index" drop-data="col" data-title="Some text here" ng-click="openDialogOutputConst($event,$index)">&lt;enter data&gt;</td>
    </tr>
  </tbody>
</table>

edited Mar 29, 2016 at 13:44

answered Mar 29, 2016 at 13:16

NiZa

3,9361 gold badge24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

CoderBeginner Over a year ago

But i want to use this with td tag as I want to show the tooltip on cell hover as each cell has different value, which should be shown on tooltip

CoderBeginner Over a year ago

I tried your code but getting two tooltips now. One before and one after. Also if i add a bigger string in title then it is not getting separated from comma. I mean tooltip height is not getting increased. It is expanding horizontally only

NiZa Over a year ago

Check again. How do you mean two tooltips?

CoderBeginner Over a year ago

Like on hover getting one default grey colour tooltip and one yellow box before the td. Also how can I separate the tooltip on basis of comma as shown in the attached image

NiZa Over a year ago

You should change title to data-title and give the tooltip a word-spacing with the same width value as his parent. See answer.

Pimmol · Accepted Answer · 2016-03-29 13:22:45Z

0

You could work with a :before :afterand do some manual positioning.

Using the :before as the stroke and the :after as the tooltip. You could create something like this.

body {
  margin-top: 100px;
}

.item {
  position: relative;

  display: inline-block;
  padding: 20px;

  background: #fff;
  border: 2px solid crimson;

  // the stroke
  // and the tooltip
  // hide them by default
  &:before,
  &:after {
    content: '';
    position: absolute;
    display: none;
  }

  // the stroke
  &:before {
    width: 100px;
    height: 2px;
    background: crimson;

    right: -100px;

    transform-origin: 0 0;
    transform: rotate(-20deg);
  }

  // the tooltip itself
  &:after {
    content: attr(title);
    color: #fff;

    top: -30px;
    right: -250px;

    width: 150px;
    padding: 5px;
    background: #000;
  }

  // when hover the item,
  // display before and after
  &:hover {
    &:before,
    &:after {
      display: inline-block;
    }
  }
}

https://jsfiddle.net/808443bt/

answered Mar 29, 2016 at 13:22

Pimmol

1,8911 gold badge10 silver badges14 bronze badges

3 Comments

CoderBeginner Over a year ago

I tried your code too, can you help me how can I hide/remove the default tooltip which comes on hover and can only show the custom tooltip on hover in place of default one. And how can I separate the values in the tooltip based on comma

Pimmol Over a year ago

hide/remove the default tooltip: remove the title attribute from the td ow can I separate the values in the tooltip based on comma: I don't understand that one.

CoderBeginner Over a year ago

Like if in title I have values like "Alaska,Arizona,California,Newzealand...". In tooltip I want to show only one name per row. How can I achieve this. You can refer to the image attached in post for a more clear view of my query

Collectives™ on Stack Overflow

how to create a custom tooltip using title attribute without jquery

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related