单独使用css为图标添加工具提示

9nvpjoqh 于 2023-04-13 发布在其他

关注(0)|答案(1)|浏览(169)

我有一个Drupal生成的html标记，其中包含一个按钮。我使用下面的css在按钮旁边添加了一个图标：

#edit-actions--3::after{
    content: url("/themes/custom/mytheme/assets/icons/tooltip.svg");
    display:inline-block;
    width:2%;
    margin-left: 0.4rem;
  }

to this tooltip.svg icon，i want to add a tooltip text on hover as“this is a tooltip icon”. how to do this with css alone？
PS：我不能编辑HTML标记来添加工具提示文本到一个span标签。所以我正在寻找一种方法来添加工具提示文本只通过CSS

css

来源：https://stackoverflow.com/questions/76001162/add-tooltip-to-icon-using-css-alone

1条答案

按热度按时间

bf1o4zei1#

我找不到你的svg。所以我从Drupal得到了一些图标。替换并使用它。

#edit-actions--3::after{
    display: inline-block;
    vertical-align:top;
    background: url(https://www.drupal.org/sites/all/themes/bluecheese/images/icon-w-bulb.svg) no-repeat .2rem .1rem/ 1.5em #0678be;    
    width: auto;
    margin-left: 0.4rem;    
    padding: 0.1rem 1rem 0.4rem 2.3rem;
    color: #fff;
    border-radius: 0.2rem;    
    content: 'This is a tooltip icon';
  }

<div class="item" id="edit-actions--3">test</div>

赞(0）回复(0）举报 2023-04-13

我来回答

单独使用css为图标添加工具提示

1条答案

相关问题

热门标签

最新问答