Add styles to title attribute-CodePudding

I'm working on a ASP.Net Web Forms project .I need to show icon in Gridview row dynamically based on a condition and need to show a tool tip when user hovers on that icon. Using the title attribute I was able to show the tool tip, but I need to design the tool tip as required (Square). How can I achieve that ..? ,How to add style to title attribute ..?

This is the code behind method

 protected string GetUnsupportedIcon(MNDto a)
    {
        if (!a.Supported)
        {
            return $@"<i fa fa-warning"" title='{message}'  style=""color:#EEA42E;font-size:16px""></i>";
        }
        else return $@"<i hidden""></i>";
    }

Calling this method from aspx page

                        <asp:TemplateField HeaderText="<%$ Resources:ColumnNewCategory.HeaderText %>" HeaderStyle-HorizontalAlign="Left" HeaderStyle-VerticalAlign="Middle" ItemStyle-VerticalAlign="Middle" ItemStyle-CssClass="mxcell" HeaderStyle-CssClass="Outside">
                            <ItemTemplate>
                                <%# ((MNDto)Container.DataItem).SuggestedCategory %>    <%# GetUnsupportedIcon((MNDto)Container.DataItem) %>
                            </ItemTemplate>
                        </asp:TemplateField>

CodePudding user response：

You can't style an actual title attribute

How the text in the title attribute is displayed is defined by the browser and varies from browser to browser. It's not possible for a webpage to apply any style to the tooltip that the browser displays based on the title attribute.

You can make a pseudo-tooltip with CSS and a custom attribute (e.g. data-title)

Example code:

<a href="http://www.google.com/" title="Hello Stackoverflow!">
  Example code --- Hover me
</a>

Example CSS:

a {
  position: relative;
  display: inline-block;
  margin-top: 20px;
}

a[title]:hover::after {
  content: attr(title);
  position: absolute;
  top: -100%;
  left: 0;
}