Question

我想创建一个工具提示，如图所示。 title标签中的值来自控制器。

这是我的表格代码：

<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>

任何人都可以帮我提供这样的工具提示。

Answer 1

这样的东西？

＆＃13;

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; 
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用:before :after并进行一些手动定位。

使用:before作为笔划，使用:after作为工具提示。你可以创建这样的东西。

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/

如何使用title属性创建自定义工具提示而不使用jquery

2 个答案: