starred/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2026-01-11 21:10:29 +01:00
Code Issues 273 Packages Projects Releases 10 Wiki Activity

Device Name when we hover over a device with Image #3420

New Issue
Closed
opened 2025-12-29 18:28:55 +01:00 by adam · 6 comments
adam commented 2025-12-29 18:28:55 +01:00
Owner
Copy Link

Originally created by @abhilashchinthalapudi on GitHub (Feb 26, 2020).

Originally assigned to: @jeremystretch on GitHub.

Environment

  • Python version: 3.6.8 -->
  • NetBox version: 2.7.7

Proposed Functionality

Is it possible to show the device name as a tool tip when we hover over a device in rack layout.The new Feature to add images is nice but we cannot see the device name until we click the device and go inside it.

Use Case

Helpful in identifying the devices like chassis,Network quickly in rack layout with Images shown in rack view

Database Changes

NA

External Dependencies

NA

Originally created by @abhilashchinthalapudi on GitHub (Feb 26, 2020). Originally assigned to: @jeremystretch on GitHub. ### Environment * Python version: 3.6.8 --> * NetBox version: 2.7.7 ### Proposed Functionality Is it possible to show the device name as a tool tip when we hover over a device in rack layout.The new Feature to add images is nice but we cannot see the device name until we click the device and go inside it. ### Use Case Helpful in identifying the devices like chassis,Network quickly in rack layout with Images shown in rack view ### Database Changes NA ### External Dependencies NA
adam added the status: accepted label 2025-12-29 18:28:55 +01:00
adam closed this issue 2025-12-29 18:28:56 +01:00
adam commented 2025-12-29 18:28:56 +01:00
Author
Owner
Copy Link

@czarnian commented on GitHub (Feb 27, 2020):

This could be browser or settings dependent, because the hover tooltip with device details is already implemented and it shows for me in Chrome, FF and Edge (Tested in NB 2.7.3, 2.7.7 and 2.7.8).

@czarnian commented on GitHub (Feb 27, 2020): This could be browser or settings dependent, because the hover tooltip with device details is already implemented and it shows for me in Chrome, FF and Edge (Tested in NB 2.7.3, 2.7.7 and 2.7.8).
adam commented 2025-12-29 18:28:56 +01:00
Author
Owner
Copy Link

@DanSheps commented on GitHub (Feb 27, 2020):

@czarnian That shows the Device Type on 2.7.8

This should be a fairly trivial change.

@DanSheps commented on GitHub (Feb 27, 2020): @czarnian That shows the Device Type on 2.7.8 This should be a fairly trivial change.
adam commented 2025-12-29 18:28:56 +01:00
Author
Owner
Copy Link

@ktims commented on GitHub (Feb 27, 2020):

Personally I think the device names are more important than the images, and should always appear on top of the images, maybe with an outline (or some cleverness to select a contrasting colour) to ensure contrast. On hover, the image opacity could be reduced to increase the text contrast.

It's probably a good idea to include some way to ensure contrast even if the text only appears on hover, either decreasing image opacity or adding an outline.

I suggest this SVG/CSS:

<defs>
<filter id="outline">
  <feMorphology operator="dilate" radius="1"/>
  <feColorMatrix type="matrix" values="
  -1 0 0 1 0
  0 -1 0 1 0
  0 0 -1 1 0
  0 0 0  1 0" result="outline"/>
  <feMerge>
    <feMergeNode in="outline"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
</defs>

text {
  ...
  filter: url(#outline);
  pointer-events: none; /* make hover event pass through to image */
}
image:hover {
  opacity: 50%;
}
@ktims commented on GitHub (Feb 27, 2020): Personally I think the device names are more important than the images, and should always appear on top of the images, maybe with an outline (or some cleverness to select a contrasting colour) to ensure contrast. On hover, the image opacity could be reduced to increase the text contrast. It's probably a good idea to include some way to ensure contrast even if the text only appears on hover, either decreasing image opacity or adding an outline. I suggest this SVG/CSS: ```svg <defs> <filter id="outline"> <feMorphology operator="dilate" radius="1"/> <feColorMatrix type="matrix" values=" -1 0 0 1 0 0 -1 0 1 0 0 0 -1 1 0 0 0 0 1 0" result="outline"/> <feMerge> <feMergeNode in="outline"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> ``` ```css text { ... filter: url(#outline); pointer-events: none; /* make hover event pass through to image */ } image:hover { opacity: 50%; } ```
adam commented 2025-12-29 18:28:57 +01:00
Author
Owner
Copy Link

@phurrelmann commented on GitHub (Feb 28, 2020):

I disagree. device name on top of the picture renders the picture useless. maybe the default should be flipped. only show the pictures when the user selects this. this would restore the default behaviour.

@phurrelmann commented on GitHub (Feb 28, 2020): I disagree. device name on top of the picture renders the picture useless. maybe the default should be flipped. only show the pictures when the user selects this. this would restore the default behaviour.
adam commented 2025-12-29 18:28:57 +01:00
Author
Owner
Copy Link

@ktims commented on GitHub (Feb 28, 2020):

Out of curiosity, other than looking pretty, what use do you get out of the picture, particularly such that it'd be compromised by putting text over it?

@ktims commented on GitHub (Feb 28, 2020): Out of curiosity, other than looking pretty, what use do you get out of the picture, particularly such that it'd be compromised by putting text over it?
adam commented 2025-12-29 18:28:57 +01:00
Author
Owner
Copy Link

@DanSheps commented on GitHub (Feb 28, 2020):

As per the original request, the name is most likely just going to be in the tooltip, any other requests will be out of scope.

@DanSheps commented on GitHub (Feb 28, 2020): As per the original request, the name is most likely just going to be in the tooltip, any other requests will be out of scope.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
beta
breaking change
complexity: high
complexity: low
complexity: medium
needs milestone
netbox
pending closure
plugin candidate
pull-request
Mirrored from GitHub Pull Request
 severity: high
severity: low
severity: medium
status: accepted
status: backlog
status: blocked
status: duplicate
status: needs owner
status: needs triage
status: revisions needed
status: under review
topic: GraphQL
topic: Internationalization
topic: OpenAPI
topic: UI/UX
topic: cabling
topic: event rules
topic: htmx navigation
topic: industrialization
topic: migrations
topic: plugins
topic: scripts
topic: templating
topic: testing
type: bug
type: deprecation
type: documentation
type: feature
type: housekeeping
type: translation
No Label status: accepted
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/netbox#3420
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?